连接predefined HTML到骨干模型和视图 [英] Connecting predefined HTML to Models and Views in Backbone

问题描述

我开始接触Backbone.js的，所以我必须说我还不是很熟悉的概念。

I'm starting out with Backbone.js so I must say I'm not yet very familiar with the concepts.

我有predefined HTML，我想用骨干力量进行管理。这一点很重要，我想保持这个样子。

I have predefined HTML and I want to use Backbone to manage this. This is important and I want to keep it like this.

这样说，是（部分）我的HTML：

Say this is (part of) my 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>

现在的想法是，当你改变输入这应该更新我的骨干建模和渲染视图，在 H1 正在用新名称更新resuling。我不知道我应该如何设置我的模型和视图。

Now the idea is that when you change the input this should update my Backbone Model and render the view, resuling in the h1 being updated with the new name. I'm not sure how I should set up my models and views.

我种有我的模型，我的看法的结构，但我不知道我应该怎么使用它们。

I kind of have the structure of my models and my views, but I don't know how I should use them.

目前，我有这样的事情：

At the moment I have something like this:

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 ?

    }
})

因此​​，在这里我的code添加注释的地方，我不知道该怎么做：

So at the places where I added comments in the code I don't know what to do:

• 在变更事件，如何找到属于该视图的模型？我可以遍历所有的车型，但似乎效率不高。


• 同样在渲染方法，我如何获得属于该视图的模型？


• 在渲染方法，我怎么只能使猪查看事件是在，而不是渲染所有的猪？

• At the change event, how do I find the model that belongs to this view? I could loop through all the models but that seems inefficient.
• Again in the render method, how do I get the model that belongs to this view?
• In the render method, how can I only render the pig view the event was on, and not render all the pigs?

也许我要为在这里一共有错误的做法。如果是这样，请点我在正确的方向。

Maybe I'm going for a total wrong approach over here. If so, please point me in the right direction.

推荐答案

好吧，我设法弄明白。

我们的想法是遍历现有的HTML使用jQuery，然后使用jQuery选择器和preloaded JSON创造它的观点实例和模式。

The idea is to loop through your existing HTML using jQuery, then creating instances of views and models of it using the jquery selectors and the preloaded 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：

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页面，然后加载所需的元素融入到我的骨干意见/模型，并从那里管理他们。

Like this I can serve a complete HTML page from the server, then load the desired elements into my backbone views/models and manage them from there.

关于阉这是主干路应使用与否：
它可能不是从一个开发者角度这样做最合理的/有效的方式。不过，我认为这种做法有一些重要的好处：

About wether this is the way backbone should be used or not: It may not be the most logical/efficient way to do this from a developer point of view. However, I think this approach has some important benefits:

• 客户端就取得的HTML直接服务，不会有处理任何JavaScript之前，页面可以是presented。作为你的HTML变得更大，这将变得更加noticable /更加复杂。


• 搜索引擎/网络爬虫可以读取你的网页，因为它提供了完整的HTML。

对于一些人来说这些点可能不那么重要，因为web应用程序会很快它已经加载和搜索引擎不会抓取后。然而，在某些情况下，你可能有一个网站和web应用程序，其中的页面需要加载速度快的混合，可以抓取，但也有一个负责任的接口，复杂到足以使开发人员想使用类似的骨干。如果有人有这个其他的想法我确实希望听到他们的声音。

For some people these points may not be that important, because a webapp will be fast after it has been loaded and search engines won't have to crawl it. However in some situations you might have a mix of a website and a webapp, where the page needs to load fast, be crawlable but also have a responsive interface which is complex enough to make a developer want to use something like backbone. If somebody has other ideas about this I sure like to hear them.

这篇关于连接predefined HTML到骨干模型和视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！