Question

我开始使用Backbone.js，所以我必须说我对这些概念还不是很熟悉。

我有预定义的HTML，我想使用Backbone来管理它。这很重要，我希望保持这样。

说这是我的HTML的一部分：

<div class="pig" data-id="1">
    <h1>Harry</h1>
    <input type="text" value="Harry">
</div>
<div class="pig" data-id="2">
    <h1>Jill</h1>
    <input type="text" value="Jill">
</div>
<div class="pig" data-id="3">
    <h1>Bob</h1>
    <input type="text" value="Bob">
</div>

现在的想法是，当您更改输入时，这应该更新我的Backbone模型并呈现视图，从而导致使用新名称更新h1。我不确定如何设置我的模型和视图。

我有一些模型和观点的结构，但我不知道应该如何使用它们。

目前我有这样的事情：

var PigModel = Backbone.Model.extend()
var pigs = new PigModel()
pigs.reset([
    {"id": "1", "name": "Harry"},
    {"id": "2", "name": "Jill"},
    {"id": "3", "name": "Bob"}
])

var PigView = Backbone.View.extend({
    el: '.pig',
    events: {
        'change input': function() {
            // update appropriate Model ?
            this.render()
        }
    },
    render: function() {

        var new_name = // get new name from model ?

        var pig_template = _.template($('#pig_template').html())
        var new_contents = pig_template({ name: new_name })

        // render only the pig that was changed ?

    }
})

所以在我在代码中添加注释的地方，我不知道该怎么做：

在change事件中，如何找到属于此视图的模型？我可以遍历所有模型，但这似乎效率低下。
再次在render方法中，如何获取属于该视图的模型？
在渲染方法中，我怎样才能渲染事件所在的猪视图，而不是渲染所有猪？

也许我会在这里采取完全错误的做法。如果是这样，请指出我正确的方向。

Answer 1

好的，我设法搞清楚了。

我们的想法是使用jQuery循环遍历现有的HTML，然后使用jquery选择器和预加载的json创建视图和模型的实例。

HTML：

<div class="pig">
    <h1>Harry</h1>
    <input type="text" value="Harry" />
</div>
<div class="pig">
    <h1>Jill</h1>
    <input type="text" value="Jill" />
</div>
<div class="pig">
    <h1>Bob</h1>
    <input type="text" value="Bob" />
</div>

使用Javascript：

$(function() {

    var PigModel = Backbone.Model.extend()

    var PigView = Backbone.View.extend({
        events: {
            'change input': function(e) {
                this.model.set('name', e.currentTarget.value)
                this.render()
            }
        },
        render: function() {
            this.$el.html(
                '<h1>' + this.model.get('name') + '</h1>' +
                '<input type="text" value="' + this.model.get('name') + '" />'
            )
        }
    })

    var pig_data = [
        {"name": "Harry"},
        {"name": "Jill"},
        {"name": "Bob"}
    ]


    // the magic starts here

    var pig_number = 0

    $('.pig').each(function() {

        new PigView({
            el: this,
            model: new PigModel(pig_data[pig_number])
        })

    })

})

Jsfiddle：http://jsfiddle.net/tU3Mt/1/

像这样，我可以从服务器提供完整的HTML页面，然后将所需的元素加载到我的骨干视图/模型中，并从那里管理它们。

关于这是否应该使用骨干的方式：从开发人员的角度来看，这可能不是最合乎逻辑/最有效的方法。但是，我认为这种方法有一些重要的好处：

客户端直接提供HTML，无需在页面显示之前处理任何javascript。随着您的HTML变得更大/更复杂，这将变得更加明显。
搜索引擎/网络抓取工具可以读取您的网页，因为它提供完整的HTML。

对于某些人来说，这些要点可能并不那么重要，因为webapp在加载后会很快，搜索引擎也不必抓取它。但是在某些情况下，您可能会混合使用网站和Web应用程序，其中页面需要快速加载，可以抓取，但也有一个响应性的界面，这个界面非常复杂，足以让开发人员想要使用像骨干这样的东西。如果有人对此有其他想法，我当然希望听到它们。

Answer 2

我会采取一些不同的方法。创建Pig模型的集合。有一个知道如何渲染单个猪的视图PigView。让它负责更新一头猪并且它是相应的h1。有一个更高级别的视图，将猪的集合呈现为您想要的任何父元素。

var PigModel = Backbone.Model.extend()
// You want a collection of pig models
var pigs = new Backbone.Collection([
    {"id": "1", "name": "Harry"},
    {"id": "2", "name": "Jill"},
    {"id": "3", "name": "Bob"}
], {model: PigModel});

var PigView = Backbone.View.extend({
    // Want to set the class for the generated el not pass a selector
    className : "pig",
    // Dummy template from your markup in question
    template : function (modelAttrs) {
        return "<h1>"+modelAttrs.name+"</h1><input type='text' value='"+modelAttrs.name+"'>";
    },
    events: {
        'change input': function(e) {
            // You have a reference to the model through this
            this.model.set({name : e.currentTarget.value});
            this.render();
        }
    },
    // Bare bones render
    render: function() {
        this.$el.html(this.template(this.model.attributes));
        return this;
    }
});

// Parent view for responsible for rendering the collection of pigs somewhere.
var HigherLevelView = Backbone.View.extend({
    render : function () {
        pigs.each(function (pig) {
            this.$el.append(new PigView({model : pig}).render().el);
        });
    }
});

$("body").append(new HigherLevelView().render().el);

Fiddle

Answer 3

附加到现有的html是可能的，但这不是很常见的方法。因此，几乎没有真正的信息:(

您可以尝试按照以下文章中描述的步骤进行操作：http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-2-progressive-enhancement-with-backbone-js/

想法是，将一些数据属性添加到渲染的html中，这样您就可以将模型与渲染的html匹配。

将预定义的HTML连接到Backbone中的模型和视图

3 个答案: