铆钉、Backbone.View和Backbone.Collection

Question

在过去的几周里，我尝试了许多方法让铆钉与Backbone.View和Backbone.Collection一起工作。我所有的尝试都被我在互联网上找到的例子所覆盖。但我还是没成功。

以下是我目前试图认识到的挑战：

• 使铆钉识别Backbone.Collection并观察所有事件
• 使用Backbone.View作为铆钉的模板，铆钉包含Backbone.Collection中所有对象的输入字段。
• 通过覆盖铆钉的功能来使用铆钉的"."-adapter，就像在网上的许多例子中所显示的那样。

我的适配器源代码如下所示：

    var dotAdapter = rivets.adapters[
        '.'],
        originalSubscribe =
            dotAdapter.subscribe,
        originalUnsubscribe =
            dotAdapter.unsubscribe;

    dotAdapter.subscribe = function (obj, keypath, callback) {          
        if (obj === undefined || obj === null) {
            return;
        }

      // Subscribe model
      if (obj instanceof Backbone.Collection) {

                obj.on('add remove reset', function () {
                        callback(obj);
                    });

                obj.on('change:' + keypath, function (
                        m, v) {
                        callback(v);
                    });

        } else if (obj != null && obj instanceof Backbone.Model) {

            obj.on('change:' + keypath, function (
                    m, v) {
                    callback(v);
                });

            obj.on('reset:' +
                    keypath, function (
                        m, v) {
                        callback(v);
                    });
        } else {
            originalSubscribe.apply(
                this, arguments);
        }
    };

    dotAdapter.unsubscribe =
        function (obj, keypath,callback) {
            if (obj === undefined || obj === null ) {
                return;
            }

           // Unsubscribe model
           if (obj instanceof Backbone.Collection) {
                obj.off('add remove reset', function () {
                        callback(
                                obj);
                    });

                obj.off('change:' + keypath, function (m, v) {
                    callback(v);
                });

            }
            else if (obj instanceof Backbone.Model) {
                obj.off('change:' + keypath, function (m, v) {
                        callback(v);
                    });
                obj.off('reset:' + keypath, function (m, v) {
                            debugger;
                            callback(v);
                        });
            } else {
                originalUnsubscribe.apply(
                    this, arguments);
            }
    };

    dotAdapter.read = function (obj,keypath) {
        if (obj === null || obj === undefined ) {
            return;
        }

        if (obj instanceof Backbone.Model) {
            return obj.get(keypath);
        }
        else if (obj instanceof Backbone.Collection)
        {
            return obj.models;
        } else {
            return obj[keypath];
        }

    };

    dotAdapter.publish =  function (obj, keypath, value) {
        if (value === "") {
            value = null;
        }

        if (obj instanceof Backbone.Collection) {
            obj.models = value;
        }
        else if (obj instanceof Backbone.Model) {
            obj.set(keypath, value);
        }
        else {
            obj[keypath] = value;
        }
    };

有人能告诉我如何覆盖铆钉的"."-adapter，使它与Backbone.Collection对象一起工作吗？

在我的集合中，我将拥有Backbone.Model对象，这些对象应该显示在相应的模板上。

Answer 1

我强烈建议不要覆盖默认的.适配器。

这可能导致意想不到的行为，例如，在我工作过的一个项目中，有人将.适配器重写为如下所示：

get: function(obj, keypath) {
 if(obj instanceof Backbone.Model)
    return obj.get(keypath);
 return obj[keypath];
},

这导致其他开发人员无法访问模型中的直接属性(attributes以外的属性)，这导致了很少的奇怪错误。

出于这些原因，最好为特殊用例创建单独的适配器。此外，通过查看绑定，可以更容易地理解对象之间的关系，这在处理嵌套结构时非常有用。

如：users:roles.admin:priviledges.create // seeing this we figure out that users and admin are both models

下面是一个简单的示例，使用在:文档中显示的rivets.js。

由于对象是通过javascript中的引用传递的，所以模型的更新将自动反映在集合中，无需担心铆钉会观察骨干收集事件。

​

rivets.adapters[':'] = {
  observe: function(obj, keypath, callback) {
    obj.on('change:' + keypath, callback)
  },
  unobserve: function(obj, keypath, callback) {
    obj.off('change:' + keypath, callback)
  },
  get: function(obj, keypath) {
    return obj.get(keypath)
  },
  set: function(obj, keypath, value) {
    obj.set(keypath, value)
  }
}
var data = [{
  name: "john",
  age: 10
}, {
  name: "joseph",
  age: 11
}, {
  name: "joy",
  age: 12
}]

var userCollection = new Backbone.Collection(data);
var View = Backbone.View.extend({
  initialize: function(options) {
    this.render()
  },
  render: function() {
    rivets.bind(this.el, {
      users: this.collection
    });
  }
});
var userView = new View({
  el: '#user-list',
  collection: userCollection
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rivets/0.8.1/rivets.bundled.min.js"></script>
<ul id='user-list'>
  <li rv-each-user="users.models">
    <input type="text" rv-value="user:age"/>
    <span>{user:name}</span><span> {user:age}</span>
  </li>
</ul>

​

Answer 2

我对铆钉很陌生。所以我在寻找适配器并尝试了你的代码。对我起作用了。所以我发了这篇文章，这样可能会对像我这样的人有帮助。

我的html页面包含如下的“：”适配器。

<ul id='item-list'>
<li rv-each-contact="contacts:">
  <a  rv-href='contact:url' >{contact:Name}</a></br></br>
  </li>

</ul>

使代码为'.‘工作。“适配器，我换了行

<li rv-each-contact="contacts:">

至

 <li rv-each-contact="contacts.">