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

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 变量，该变量为空，但随后从服务器获取的 JSON 调用 bindView() 方法并传递从返回的用户对象服务器并将其绑定到视图。

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

现在更新配置文件后，我再次调用 bindView() 方法，该方法首先取消绑定视图，然后将其与新对象绑定（参见方法）。问题是它没有绑定它并且分页符。如果我从方法中删除 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 将新对象绑定到视图？

How to bind a fresh object to the view with Rivets JS?

javascript

data-binding

jquery

rivets.js