具有处理程序和绑定标记属性的按钮

Question

我想在jsviews模板中定义一个既有点击处理程序又有数据绑定属性的按钮。

假设我有这些数据：

var data = {
    Enable : true,
    DisplayName : "foo",
    SomeData : 42
};

这位助手：

var handlers = {
    fooClicked : function(data, evt) {
        console.log(arguments);
    }
};

如何在我的模板中添加一个按钮来检测事件处理程序和按钮的属性？

我试过了：

• <button data-link="{on ~onAvailabilityClick SomeData disabled:^{!Enable}}"> {^{>DisplayName}} </button>
• <button data-link="{on ~onAvailabilityClick SomeData} disabled:^{!Enable}"> {^{>DisplayName}} </button>
• {^{on ~onAvailabilityClick SomeData}}<button data-link="disabled:^{!Enable}"> {^{>DisplayName}} </button>{{/on}}

但这些都不起作用（模板语法错误或不完整的按钮，如没有文本或没有处理程序）。

我使用的是jsViews 0.98.4。

PS：我不知道它是否重要，但实际上，我的模板是在一个for循环内输入的，用于深层对象结构。

Answer 1

您可以在此处找到有关设置多个数据链接绑定及其他相关主题的文档：

• http://www.jsviews.com/#linked-elem-syntax@fullsyntax
• http://www.jsviews.com/#link-elemattribs
• http://www.jsviews.com/#link-tags
• http://www.jsviews.com/#link-events

在你的情况下，你需要写

<button data-link="disabled{:!Enable} {on ~onAvailabilityClick SomeData}">
     {^{>DisplayName}}
</button>

或者如果您愿意：

<button
  data-link="disabled{:!Enable} {on ~onAvailabilityClick SomeData} {:DisplayName}">
</button>

Answer 2

我终于做到了：

<button data-link="disabled{:!Enable} {on ~onAvailabilityClick SomeData}">
     {^{>DisplayName}}
</button>