RactiveJS-09 Two-way binding

最新推荐文章于 2021-07-06 16:35:42 发布

「已注销」

最新推荐文章于 2021-07-06 16:35:42 发布

阅读量566

点赞数

分类专栏： Ractive

本文链接：https://blog.csdn.net/duola8789/article/details/70135859

版权

Ractive 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

简单的双向绑定

Ractive的输入输出的双向绑定的使用方法和常规的html标签有不同之处，对于不同类型的input来说：

text:数据绑定到value上
radio，checkbox：value数据绑定到各自input的name上（checked绑定的是布尔值）
select：各个option的value绑定到select的value上

文本输入框的双向绑定

实现数据的双向绑定很简单：

<div id="container"></div>
<script type="text/ractive" id="template">
    <label>
        输入你的名字： <input type='text' value={{value}}>
    </label>
    <p>Hello, {{value}}</p>
</script>
<script>
    var ractive = new Ractive({
        el : '#container',
        template : '#template'
    })
</script>

可以在Ractive的初始化选项中对双向绑定进行设置，

lazy: true // 数据只有在cahnge和blur时才会更新
twoway：false // 关闭双向绑定

observe

上面的这种绑定其实很少使用，因为通常情况下我们都希望对绑定的数据进行处理，所以需要用到ractive.observe()方法

ractive.observe( 'name', function ( newValue, oldValue ) {
    doSomethingWith( newValue );
});

radio和checkbox的双向绑定

对于radio和checkbox的绑定，可以将数据绑到name属性上，{{name}}和被选定的input的value有进行了绑定。

<script type="text/ractive" id="template">
    <label><input type='checkbox' name='{{value}}'  value='123' checked>123</label>
    <label><input type='checkbox' name='{{value}}'  value='456'>456</label>
            <p>this is {{value}}</p>
</script>

上面的checked是一个布尔属性，checked=’false’与checked效果是相同的，因为布尔属性只要出现就意味着true，如果要为false只能不出现在标签中。

在jQuery中，可以使用prop(‘checked’, false)取消input的选中

一个input里面只能出现一个自动与Ractive关联的变量（==我自己感觉，不知道正确与否==）

ractive.toggle()是在两个值之间循环更改变量的方法

select的双向绑定

将各个option的value绑定到了select的value上：

<script type="text/ractive" id="template">
    <select value='{{value}}'>
        <option value='111'>1</option>
        <option value='222'>2</option>
        <option value='3333'>3</option>
    </select>
    <p>this is {{value}} </p>
</script>

也可以用each循环实现这个结构：

<script type="text/ractive" id="template">
    <select value='{{jay}}'>
        {{#each jays}}<option>{{this}}</option>{{/each}}
    </select>
    <p>{{jay}}</p>
</script>
<script>
    var ractive = new Ractive({
        el : '#container',
        template : '#template',
        data:{
            jays : [111,222,333],
            jay : this[2]

        }
    });
</script>