RivetsJS使用保存功能更新模型

时间:2016-06-25 05:31:02

标签: jquery data-binding rivets

我有这些输入,如果我使用rv-value我可以实时更新数据但我想只在用户点击保存时解析数据..我该怎么做?

    <form class="form">
        <div class="col-md-6">
            <label>ID</label>
            <input class="form-control" name="id" value="" rv-placeholder="user.id" rv-value=""><br/>
            <label>Name</label>
            <input class="form-control" name="name" value="" rv-placeholder="user.name" rv-value=""><br/>
            <label>Age</label>
            <input class="form-control" name="age" value="" rv-placeholder="user.age" rv-value="">
        </div>
        <div class="col-md-6">
            <label>City</label>
            <input class="form-control" name="city" value="" rv-placeholder="user.city" rv-value="user.city"><br/>
            <label>State</label>
            <input class="form-control" name="state" value="" rv-placeholder="user.state" rv-value=""><br/>
            <label>Zip</label>
            <input class="form-control" name="zip" value="" rv-placeholder="user.zip" rv-value="">
        </div>
    </div>
    </form>

1 个答案:

答案 0 :(得分:1)

我创造了一个小提琴来回答你的问题:https://jsfiddle.net/fba88ph9/13/

var data = {
    placeholder: {
    id: 0,
    name: "your name",
    age: "your age",
    city: "city",
    state: "state",
    zip: "1804YZ"
  },
  user : {},
  save : function(){
    var parsedData = JSON.parse(JSON.stringify(data.user));
    //do something with the parsedData.
    console.log(parsedData);
  }
};


rivets.bind($("#app"), data);

我已将用户对象和占位符对象分开。通过将用户密钥绑定到rv-value,只要您更改表单,就会更新用户对象。添加的保存按钮将在使用rv-on-click按下时调用保存功能。这将使用JSON解析技巧克隆当前数据。