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

Connecting predefined HTML to Models and Views in Backbone

本文关键字：模型 视图 预定义 HTML 连接      更新时间：2023-09-26

我刚开始使用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>

现在的想法是，当您更改输入时，这应该会更新我的主干模型并渲染视图，从而使用新名称更新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事件中，如何找到属于此视图的模型？我可以循环浏览所有的模型，但这似乎效率很低
  • 在渲染方法中，如何获取属于此视图的模型
  • 在渲染方法中，如何只渲染事件所在的pig视图，而不渲染所有pig

也许我在这里的做法完全错误。如果是，请给我指一个正确的方向。

好的，我设法弄明白了。

这个想法是使用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])
        })
    })
})

Js文件：http://jsfiddle.net/tU3Mt/1/

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

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

  • 客户端get的HTML直接提供，在页面显示之前不必处理任何javascript。随着HTML变得越来越大/越来越复杂，这将变得更加引人注目
  • 搜索引擎/网络爬虫可以读取您的页面，因为它提供完整的HTML

对一些人来说，这些点可能没有那么重要，因为网络应用程序加载后会很快，搜索引擎也不必对其进行爬网。然而，在某些情况下，你可能会将网站和网络应用程序混合在一起，页面需要快速加载、可爬网，但也有一个响应界面，它足够复杂，让开发人员想要使用主干网之类的东西。如果有人对此有其他想法，我当然愿意听听。

我会采取一点不同的方法。创建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

附加到现有html是可能的，但这不是很常见的方法。正因为如此，几乎没有关于这方面的真实信息：（

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

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

相关文章：