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

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应用程序,其中页面需要快速加载,可以抓取,但也有一个响应式界面,这个界面非常复杂,足以让开发人员想要使用像骨干这样的东西.如果有人对此有其他想法,我肯定希望听到他们.