如何在knock.js中指定绑定上下文,就像在knockout.js和WPF中一样

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在knock.js中指定绑定上下文,就像在knockout.js和WPF中一样相关的知识,希望对你有一定的参考价值。

如果你问我,我们正在使用Vue.js,非常好的框架。从Knockout.jsWPF我知道可以为绑定指定上下文。如何用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中一样的主要内容,如果未能解决你的问题,请参考以下文章

在样式中指定列表框 ItemContainer 上的数据上下文类型

如何以编程方式在 C# 中指定单向绑定?

如何在magicrecord中指定合并策略

如何在JSF XHTML中指定UTF-8字符?

如何在构建脚本中指定链接器标志/参数?

我们是不是需要在 WCF 服务器和客户端中指定相同的绑定?