Javascript 带手柄的主干UI模型绑定

我希望在主干应用程序中使用Handlebar实现UI绑定。我放了一个简单的例子来演示设计模式，但我注意到它的伸缩性不是很好，因为每次更改模型值时都需要渲染整个模板

是否有一种方法可以更新把手模板中的单个值，而无需重新渲染整个模板

HTML:

---

您可以监听模型上的特定属性更改，只更新相应的html元素

收听型号标题更改（

this.listenTo

与

this.on

相同，但它允许侦听器在调用

this.stopListening

时解除绑定）

然后创建

updateTitle

处理程序

updateTitle: function(model, value, options)
{
    // this.$ === this.$el.find
    this.$('h1').text(value);
}

---

如果视图知道使用模板中元素的每个位置的选择器，则可以执行以下操作，为每个属性更改创建单独的处理程序，并使用提供的选择器更新相关HTML

var TestView = Backbone.View.extend({
    template: Handlebars.compile($("#entry-template").html()),
    events: {
        "click [data-class='toggleActive']": "toggleActive"
    },
    modelBindings: {
      // property name: CSS selector of where to update
      title: 'h1',
      description: 'p'
    },
    initialize: function(){
        this.model = new TestModel();
        this.render();

        var me = this;

        function createHandler(selector) {
            return function(model, value) {
                me.$(selector).html(value);
            }                
        }

        for (var modelProp in this.modelBindings) {
            this.model.on("change:" + modelProp, createHandler(this.modelBindings[modelProp]));
        }

    },
    render: function(){
        var self = this;
        $('body').html(self.$el.html(self.template(self.model.toJSON())));
    },

    toggleActive: function(){
        var isActive = this.model.get("active");
        this.model.set("active", !isActive);
    }
});

---

这只适用于您想要更新HTML的地方，而在您想要添加类的情况下则不起作用。在这种情况下，您可以使用相同的概念，向元素添加/删除属性

我认为OP需要一种自动更新位置的方法，比如说

{{someModelProperty}

@JuanMendes是的，您可能是对的，不过，这确实解决了OPs不希望重新呈现整个模板的问题。我创建了一个我觉得使用jQuery更新模板中的每个数据实例会首先破坏使用Handlebar的目的。如果要建立对视图中保存动态数据的每个dom对象的引用，为什么不一起排除Handlbar呢？如果你不能用模板语言来改变模板中的值，我想我不理解模板语言的意义…Angular每次都会更新整个模板，而且它非常流行。恐怕你所问的问题非常广泛，没有一个正确的解决方案，有很多方法可以解决，而且都涉及到很多问题。更适合做什么？一个可能的解决方案是：每个视图都需要为视图中呈现的每个模型属性指定一个CSS选择器

this.listenTo(this.model, 'change:title', this.updateTitle);

updateTitle: function(model, value, options)
{
    // this.$ === this.$el.find
    this.$('h1').text(value);
}

var TestView = Backbone.View.extend({
    template: Handlebars.compile($("#entry-template").html()),
    events: {
        "click [data-class='toggleActive']": "toggleActive"
    },
    modelBindings: {
      // property name: CSS selector of where to update
      title: 'h1',
      description: 'p'
    },
    initialize: function(){
        this.model = new TestModel();
        this.render();

        var me = this;

        function createHandler(selector) {
            return function(model, value) {
                me.$(selector).html(value);
            }                
        }

        for (var modelProp in this.modelBindings) {
            this.model.on("change:" + modelProp, createHandler(this.modelBindings[modelProp]));
        }

    },
    render: function(){
        var self = this;
        $('body').html(self.$el.html(self.template(self.model.toJSON())));
    },

    toggleActive: function(){
        var isActive = this.model.get("active");
        this.model.set("active", !isActive);
    }
});