将预定义的 HTML 连接到 Backbone 中的模型和视图 [英] Connecting predefined HTML to Models and Views in Backbone

问题描述

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

我已经预定义了 HTML 并且我想使用 Backbone 来管理它.这很重要，我想保持这种状态.

说这是(部分)我的 HTML:

<h1>哈利</h1><input type="text" value="Harry">
<div class="pig" data-id="2"><h1>吉尔</h1><输入类型=文本"值=吉尔">

<div class="pig" data-id="3"><h1>鲍勃</h1><input type="text" value="Bob">

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

我有点了解模型的结构和视图，但我不知道应该如何使用它们.

目前我有这样的事情:

var PigModel = Backbone.Model.extend()var pigs = new PigModel()猪.重置([{"id": "1", "name": "Harry"},{"id": "2", "name": "Jill"},{"id": "3", "name": "Bob"}])var PigView = Backbone.View.extend({el: '.pig',事件:{'改变输入':函数(){//更新合适的模型?this.render()}},渲染:函数(){var new_name =//从模型中获取新名称 ?var pig_template = _.template($('#pig_template').html())var new_contents = pig_template({ name: new_name })//只渲染被改变的猪?}})

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

• 在 change 事件中，如何找到属于该视图的模型?我可以遍历所有模型，但这似乎效率低下.
• 再次在render方法中，如何获取属于该视图的模型?
• 在渲染方法中，如何只渲染事件所在的猪视图，而不渲染所有猪?

也许我在这里采用了完全错误的方法.如果是这样，请指出正确的方向.

解决方案

好的，我想通了.

这个想法是使用 jQuery 遍历现有的 HTML，然后使用 jquery 选择器和预加载的 json 创建它的视图和模型的实例.

HTML:

<h1>哈利</h1><input type="text" value="Harry"/>
<div class="pig"><h1>吉尔</h1><input type="text" value="Jill"/>

<div class="pig"><h1>鲍勃</h1><input type="text" value="Bob"/>

Javascript:

$(function() {var PigModel = Backbone.Model.extend()var PigView = Backbone.View.extend({事件:{'改变输入':函数(e){this.model.set('name', e.currentTarget.value)this.render()}},渲染:函数(){这个.$el.html('<h1>'+ this.model.get('name') + '</h1>'+'<input type="text" value="' + this.model.get('name') + '"/>')}})var pig_data = [{"name": "哈利"},{"name": "吉尔"},{"name": "鲍勃"}]//魔法从这里开始var pig_number = 0$('.pig').each(function() {新猪视图({el:这个，模型:新的 PigModel(pig_data[pig_number])})})})

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

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

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

• 客户端直接获取 HTML 服务，无需在页面呈现前处理任何 javascript.随着您的 HTML 变得更大/更复杂，这将变得更加明显.
• 搜索引擎/网络爬虫可以读取您的网页，因为它提供完整的 HTML.

对于某些人来说，这些要点可能并不那么重要，因为 Web 应用程序加载后速度会很快，搜索引擎无需对其进行抓取.但是，在某些情况下，您可能会混合使用网站和 web 应用程序，其中页面需要快速加载、可抓取，但也有响应式界面，该界面复杂到足以让开发人员想要使用诸如主干之类的东西.如果有人对此有其他想法，我肯定想听听.

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

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

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>

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 ?

    }
})

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.

解决方案

Ok, I managed to figure it out.

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:

$(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/

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:

• The client get's HTML served directly and won't have to process any javascript before the page can be presented. This will become more noticable as your HTML gets bigger/more complex.
• Search engines/web crawlers can read your page because it serves the complete HTML.

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.

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