Question

我正在处理应用程序的个人资料部分，用户可以在其中查看其个人资料的详细信息，如果他点击编辑，则右侧的部分变为可见，让他编辑细节。

我正在使用RivetsJS使其成为单页应用程序，因此当用户开始在右侧的文本框中键入时，结果也会显示在左侧的配置文件部分中，主要是因为这两个方式数据绑定看起来很好，并在更新时保持这种方式。

var view = null;

bindView = function(user){
    // If the view is binded previously, unbind it
    if(view != null){
        view.unbind();
    }

    // Bind a fresh object to the view
    view = rivets.bind($('#profile'), {user: user});

};

// Fetching the user details and binding them to the view
$.getJSON('/auth/user', function(response){
    bindView(response);
});

因此，当视图加载时，我有view变量，该变量为null，但随后从服务器获取JSON，调用bindView()方法并传递从服务器返回的用户对象并将其绑定到观点。

$.ajax({
    url: '/profile/update',
    type: 'POST',
    dataType: 'JSON',
    data: $('form#user-form').serialize(),
    success: function(response){
        bindView(response);
        $( "#toggleprofile" ).toggle("slow");
    },
});

现在，当配置文件更新时，我再次调用bindView()方法，该方法首先取消绑定视图，然后将其与新对象绑定（请参阅mehtod）。问题是它没有绑定它和分页符。如果我从方法中删除view.unbind()，它可以正常工作。

那么正确的方法是什么？这是如何运作的？我的意思是我认为我应该取消绑定视图然后将它与新对象绑定到它们各自的元素，但这不起作用。为什么呢？

如果我已经将#profile标签绑定到user对象，然后我将其与另一个更新的对象绑定，那么就不会发生冲突或这是否可行？

Answer 1

绑定的关键在于您应该更新现有对象，而不是重新绑定新对象。当观察对象发生变化时，它应该自动更新绑定元素，反之亦然。这看起来像这样：

var userData = { user: '' };
rivets.bind($('#profile'), userData);

$.ajax({
  url: '/profile/update',
  type: 'POST',
  dataType: 'JSON',
  data: $('form#user-form').serialize(),
  success: function(response) {
    userData.user = response;
    $( "#toggleprofile" ).toggle("slow");
  }
});

如何使用Rivets JS将新对象绑定到视图？

1 个答案: