如何在knock.js中指定绑定上下文,就像在knockout.js和WPF中一样
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在knock.js中指定绑定上下文,就像在knockout.js和WPF中一样相关的知识,希望对你有一定的参考价值。
如果你问我,我们正在使用Vue.js,非常好的框架。从Knockout.js和WPF我知道可以为绑定指定上下文。如何用Vue.js完成?
请参阅下面的示例。这里binding-context
是我在Vue中寻找的功能的伪代码。
Vue.component('hosting-setup', {
template:
'<wizard>' +
'<wizard-step binding-context="step1" :title="title">' +
'<select :options="choices"></select>' +
'</wizard-step>' +
'<wizard-step binding-context="step2" :title="title">' +
'<select :options="choices"></select>' +
'</wizard-step>' +
'</wizard>',
data: function () {
return {
step1: {
title: 'Choose virtualization software',
choices: ['Virtual Box', 'VMWare'],
choice: undefined,
},
step2: {
title: 'Choose guest operating system',
choices: ['Debian 6', 'Ubuntu 16', 'Windows Server 2012'],
choice: undefined
}
};
}
});
答案
在Vue
中没有“with”绑定等价物。你想做什么有几种方法,但是对于你的例子,我会使用computed
将数据作为数组返回,然后使用v-for
打印出作为道具传递相关数据的每个组件:
实例视图
Vue.component('wizard-step', {
template: `<div>{{title}}</div>`,
props: ['title']
});
new Vue({
el: '#app',
computed: {
wizardSteps() {
return [this.step1, this.Step2]
}
},
data() {
return {
step1: {
title: 'Choose virtualization software',
choices: ['Virtual Box', 'VMWare'],
choice: undefined,
},
Step2: {
title: 'Choose guest operating system',
choices: ['Debian 6', 'Ubuntu 16', 'Windows Server 2012'],
choice: undefined
}
};
}
})
标记
<wizard-step :title="step.title" v-for="(step, index) in wizardSteps" :key="index"></wizard-step>
这是JSFiddle:http://jsfiddle.net/craig_h_411/vzq25go5/
编辑
如果要将数据直接传递给组件,可以使用v-bind
传递对象,并将要在组件中使用的对象属性名称声明为props
,这可能更接近您的要求,因此:
Vue.component('wizard-step', {
template: `<div>
{{title}}
<select>
<option v-for="choice in choices" >{{choice}}</option>
</select>
</div>`,
props: ['title','choices']
});
父级标记
<wizard-step v-bind="step1"></wizard-step>
<wizard-step v-bind="Step2"></wizard-step>
这是JSFiddle:http://jsfiddle.net/craig_h_411/7dg41j0w/
另一答案
如果您确实嵌套了子项,可以尝试使用v-for作为1项数组作弊。
<template v-for="local in [data.nest1.nest2.nest3]">
//normal binding using local.XXXX
</template>
以上是关于如何在knock.js中指定绑定上下文,就像在knockout.js和WPF中一样的主要内容,如果未能解决你的问题,请参考以下文章