JsViews：双向绑定问题答案

【问题标题】：JsViews : two-way binding issueJsViews：双向绑定问题
【发布时间】：2014-09-25 06:53:43
【问题描述】：

当您在 data-link 中绑定附加属性时，默认的 bindng 和 trigger=true 停止工作。没有错误或任何明显的东西。但它不起作用。

默认绑定

在此示例中 (http://jsfiddle.net/BorisMoore/wch601L9/ )，绑定了 "amount" 属性而不显式设置属性（例如 value{:amount} ）。有用！

<td><input data-link="amount trigger=true" /></td>

如果您通过添加附加绑定来更改此代码，则默认绑定“金额”不再显示在文本框中。

<td><input data-link="amount trigger=true disabled{:isSameAmountForAll}" /></td>

这里 (http://jsfiddle.net/michaelsync/xzo15n0s/) 是我的 BorisMoore 示例的 fork 版本，我进行了更改以显示这种情况。

我找到的解决方案是为所有绑定显式设置属性名称。

<td><input data-link="value{:amount} trigger=true disabled{:isSameAmountForAll}" /></td>

这是已知问题吗？

trigger=true

如果您在文本框中输入一些数字（示例示例http://jsfiddle.net/michaelsync/xzo15n0s/），您将看到总数没有更新。

我不确定如何解决这个问题。这也是一个已知问题吗？

如果这个问题不清楚，请随时告诉我。谢谢！

注意：如果您想知道我为什么要绑定两个属性，那么这是我正在测试的示例。 http://jsfiddle.net/michaelsync/078cazh8/2/

更新 #1：

我现在正在调试 JsViews 源代码。我修改了我的代码示例以进行调试。

这里是 v1。 http://jsfiddle.net/michaelsync/tmwyhc7n/1/

只有一个绑定的模板

<script id="personTmpl" type="text/x-jsrender">
    <input data-link="amount trigger=true" /> <br/>
</script>

<div id="placeholder" ></div>

var myTemplate = $.templates("#personTmpl");

var people = [
  {
    name: "Adriana",
    amount:  10,
    isSameAmountForAll: false      
  }
];

myTemplate.link("#placeholder", people);

我在function parseTag(all, bind, tagName, converter, colon, html, comment, codeTag, params, slash, closeBlock, index)设置断点

我只有命中，“all”参数的值为“”{{:amount trigger=true}}””

现在，我添加了额外的绑定，如下所示。

<script id="personTmpl" type="text/x-jsrender">
    <input data-link="value{:amount} trigger=true disabled{:isSameAmountForAll}" /> <br/>
</script>

<div id="placeholder" ></div>

V2：http://jsfiddle.net/michaelsync/tmwyhc7n/2/

然后我得到了两次点击，因为我绑定了“amount”和“isSameAmountForAll”。你看到解析中缺少“trigger=true”。

所以.. 我将“trigger=true”移到了金额中。

<script id="personTmpl" type="text/x-jsrender">
    <input data-link="value{:amount trigger=true}  disabled{:isSameAmountForAll}" /> <br/>
</script>

<div id="placeholder" ></div>

V3：http://jsfiddle.net/michaelsync/tmwyhc7n/3/

更新 #2：

解析似乎正确，但 ObserverAll 不起作用..

我更改了下面的代码以检测金额变化，但没有触发事件。

// http://stackoverflow.com/questions/25721180/summary-value-calculation-with-jsviews

var myTemplate = $.templates("#personTmpl");

var people = [
  {
    name: "Adriana",
    amount:  10,
    isSameAmountForAll: false      
  }
];

myTemplate.link("#placeholder", people);

$.observable(people).observeAll(function() {
    console.log('weird stuff');
});

V4：http://jsfiddle.net/michaelsync/tmwyhc7n/4/

【问题讨论】：

标签： javascript jsviews

【解决方案1】：

你需要

<input data-link="{:amount trigger=true:}  disabled{:isSameAmountForAll}" />

http://www.jsviews.com/#linked-elem-syntax

要拥有多个绑定，每个绑定都需要是完整的语法（使用{...}）。对于双向绑定，它需要使用默认绑定目标（属性） - 所以不要指定目标属性：

{:amount trigger=true:}.

对于单向绑定，您可以指定其他目标，例如disabled：

disabled{:isSameAmountForAll}。

【讨论】：