Javascript 单击按钮绑定并查看模型封装

我想使用Ractivejs实现简单的切换按钮功能。代码如下：

function MyViewModel(model) {
    var self = this;
    self.value = false;
    self.toggleValue = function () {
        self.value = !self.value; //this will probably not update view, but it is not the point here
    };
}

var viewModel = new MyViewModel(model);
var ractive = new Ractive({ el: 'mydiv', template: '#mytemplate', data: viewModel });

这是我的模板

<script id='mytemplate' type='text/ractive'>
    <p>Value: {{value}}</p>
    <button type="button">Toggle</button>
</script>

值：{{Value}}

切换

单击按钮时如何调用MyViewModel.toggleValue函数？目前我知道两种选择：

我可以通过单击“切换（“值”）将

添加到
按钮
元素。然而，让我们假设我的toggleValue函数可能更复杂一些，所以这个解决方案是不够的

我可以通过单击将

添加到
按钮
元素。但我需要添加以下代码：

Active.on（'toggleValue'，函数（）{
viewModel.toggleValue（）；
});

这意味着：

我编写的代码必须了解此视图模型之外的视图模型。从封装的角度来看，这是不好的

这还意味着，

toggleValue

对于Ractive实例是全局的，而不是特定于视图模型的，这意味着维护问题迟早会出现

它在任何方面都不比使用jQuery

$（“按钮”）好。单击（myFunction）

那么，我如何正确地做到这一点呢？我需要相当于KnockoutJs'

databind=“click:toggleValue”

---

编辑：对于工作代码，请查看此处：

您可以通过向Ractive添加原型方法来创建该类型的语法：

Ractive.prototype.bind = function(context, method){

    // if using < 0.6.1 you may encounter bug {{this}} or {{.}} not returning model root
    //context = context || this.data

    context[method].call(context, this)
}

模板为：

<button type="button" on-click="bind('toggleValue')">Toggle</button>
<ul>
{{#tab}}
    <li on-click="bind('click')">{{val}}</li>
{{/tab}}
</ul>

---

请参见

您可以通过向Ractive添加原型方法来创建该类型的语法：

Ractive.prototype.bind = function(context, method){

    // if using < 0.6.1 you may encounter bug {{this}} or {{.}} not returning model root
    //context = context || this.data

    context[method].call(context, this)
}

模板为：

<button type="button" on-click="bind('toggleValue')">Toggle</button>
<ul>
{{#tab}}
    <li on-click="bind('click')">{{val}}</li>
{{/tab}}
</ul>

---

参见

我认为第二种变体没有错。 视图有元素，当有人单击按钮时，视图传播一些事件。 View甚至不知道有人有该事件的监听器，也不关心有人是否真的有这样的监听器

在我看来，根据您的业务逻辑命名事件只会让您自己感到困惑。但这是错误的，依我看。 视图应该抛出一个常规事件，比如“一个按钮被点击了，我不在乎是否有人想做点什么”。 在国际海事组织，通过该事件的工作足以使各层相互分离

像这样：

模板：

<script id='mytemplate' type='text/ractive'>
    <p>Value: {{value}}</p>
    <button type="button" on-tap="UserMakeSomeAction">Toggle</button>
</script>

---

另外，您的KnockoutJs示例主要是关于耦合表示层和行为层。您的视图应该确切地知道控制器上应该存在什么方法，知道它的名称，并调用它。依我看，基于事件的传播要好得多。

我认为第二种变体没有错。 视图有元素，当有人单击按钮时，视图传播一些事件。 View甚至不知道有人有该事件的监听器，也不关心有人是否真的有这样的监听器

在我看来，根据您的业务逻辑命名事件只会让您自己感到困惑。但这是错误的，依我看。 视图应该抛出一个常规事件，比如“一个按钮被点击了，我不在乎是否有人想做点什么”。 在国际海事组织，通过该事件的工作足以使各层相互分离

像这样：

模板：

<script id='mytemplate' type='text/ractive'>
    <p>Value: {{value}}</p>
    <button type="button" on-tap="UserMakeSomeAction">Toggle</button>
</script>

---

另外，您的KnockoutJs示例主要是关于耦合表示层和行为层。您的视图应该确切地知道控制器上应该存在什么方法，知道它的名称，并调用它。在我看来，基于事件的传播要好得多。

首先，我在这里假设MVVM模式（这可能是错误的）。其次，视图必须了解其视图模型—其中一个视图确实知道视图模型有一个名为

value

的字段—以便视图可以显示它。那么，当涉及到事件时，为什么视图会突然“忘记”它对视图模型的了解呢？它并没有使视图变得更加独立，它引入了额外的复杂性层，这可能是错误的来源。Ractive试图成为一个图书馆不可知论者，但对任何特定的web m-v-x-无论什么名称：）都有帮助。关于函数调用是否应该基于模型（在其对称性方面很有吸引力）有一些讨论，但控制器方法到目前为止胜出。可能是因为ractive有数据处理方法。请随时加入[google group]（groups.google.com/forum/#！forum/ractive js）或了解讨论方向和愿景。首先，我假设这里是MVVM模式（这可能是错误的）。其次，视图必须了解其视图模型—其中一个视图确实知道视图模型有一个名为

value

的字段—以便视图可以显示它。那么，当涉及到事件时，为什么视图会突然“忘记”它对视图模型的了解呢？它并没有使视图变得更加独立，它引入了额外的复杂性层，这可能是错误的来源。Ractive试图成为一个图书馆不可知论者，但对任何特定的web m-v-x-无论什么名称：）都有帮助。关于函数调用是否应该基于模型（在其对称性方面很有吸引力）有一些讨论，但控制器方法到目前为止胜出。可能是因为ractive有数据处理方法。请随时加入[google group]（groups.google.com/forum/#！forum/ractive js）或了解讨论方向和愿景。这可能是朝着正确方向迈出的一步，但我们还没有做到。请看一看-这次我们有嵌套的视图模型，希望从子视图模型（RowViewModel）调用

单击
函数。我看了一下传递给
bind
函数的内容，没有看到任何可以表明RowViewModel对象是当前上下文的内容。它正在变得更好-我希望可以向上投票两次：-），但还有一个问题-在单击函数中，我想操纵视图模型，例如更改
val
的值。请看这里：-现在在
ractive.set
中，我需要使用变量的完整键路径，这意味着我的RowViewModel需要了解MyViewModel。这可能是朝着正确方向迈出的一步，但我们还没有做到。请
ractive.on('UserMakeSomeAction', function () { viewModel.toggleValue(); });