javascript - 在 jsviews 中绑定(bind)到表单的正确语法(提交 26)

Question

我正在试验 Boris Moore 的 jsrender/jsviews 库，目前使用的是当前版本(提交 26)。 (我意识到 API 在不断变化，但想练习使用它)

我看过这里的演示: http://borismoore.github.com/jsviews/demos/index.html

但我无法确定 data-link 语法。在一些演示中，语法是 data-link="{:FirstName:}

我不明白为什么有 2 个冒号。我假设第一个冒号意味着不会进行 HTML 编码，但不知道第二个冒号。

在其他地方，我看到类似 data-link="address.street" 的语法，这里根本没有花括号或冒号。我想知道你什么时候需要它们，什么时候不需要。此外，如果您想要单向或双向绑定(bind)，我也不会遵循您的指定方式。或者，如果您希望绑定(bind)触发以响应按键而不是模糊。

这是我想正确设置的示例:

<div id="form">
    <p>
        <label>First Name</label>
        <input type="text" name="FirstName" data-link="FirstName"/>
    </p>
    <p>
        <label>Last Name</label>
        <input type="text" name="LastName" data-link="LastName"/>
    </p>
    <p>
        <label>Full Name</label>
        <input type="text" data-link="FirstName + ' ' + LastName"/>
    </p>
    <p>
        <label>Gender</label>
        <select name="Gender">
            <option value="U">Unknown</option>
            <option value="M">Male</option>
            <option value="F">Female</option>
        </select>
    </p>
</div>
<script>
   var data =
   {
      FirstName: "Bill",
      LastName: "Willis",
      Gender: "M"
   };

   $("#form").link(true, data);  //What is the 1st parameter (true) about?
</script>

我不知道如何绑定(bind)到选择控件。

如果能解释一下应该如何完成，我将不胜感激。

Answer 1

data-link="a.b.c" 是简写语法，等同于输入的完整语法 data-link="{:a.b.c:}" (它为您提供双向绑定(bind))和 data-link="{:a.b.c}" 用于大多数其他元素(即不是用户输入的表单元素，所以它当然是单向绑定(bind))。

参见 https://github.com/BorisMoore/jsviews/issues/136了解一些细节。

如果你想进行非默认绑定(bind)，你可以使用完整的语法，例如使用 convert 或 convertBack，如 data-link="{cvt:a.b.c:cvtBack}"，或单向绑定(bind)输入，如 data-link="{:a.b.c} ".

因此冒号既指定了绑定(bind)的方向，又允许您为该绑定(bind)添加一个转换器。

目前不直接支持单向“来源”，但可以通过使用转换器实现。绑定(bind)到 select 显示在几个示例中，例如 this one , 或 this one .

目前触发器是 onblur(或 onchange)——但很快也可以通过声明方式进行设置。现在它需要代码来实现它 - 如 this example .

所有演示的代码都是here .