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

时间:2013-02-17 06:52:31

标签: javascript jsrender jsviews

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

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

但我无法确定data-link语法。在某些演示中,语法为data-link="{:FirstName:}

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

在其他地方,我看到像data-link="address.street"这样的语法。这里根本没有花括号或冒号。我想知道你什么时候需要它们,什么时候不需要它们。如果您想要单向或双向绑定,我也不会按照您的指示方式进行操作。或者,如果你想要绑定触发按键而不是模糊。

以下是我想要正确设置的示例:

<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>

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

我很感激有关如何做到这一点的任何解释。

1 个答案:

答案 0 :(得分:2)

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

有关详细信息,请参阅https://github.com/BorisMoore/jsviews/issues/136

如果您想进行非默认绑定,请使用完整语法,例如:与data-link="{cvt:a.b.c:cvtBack}"中的convert或convertBack一样,或对输入进行单向绑定,如data-link="{:a.b.c}"

因此冒号都指定了绑定的方向,并允许您为该绑定添加转换器。

目前尚未直接支持单向“源”,但可以使用转换器。绑定到选择显示在几个示例中,例如this onethis one

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

所有演示的代码均为here