从网页获取数据而不是处理 DOM 和 HTML 元素的更好方法

Question

我正在使用 Backbone，在我使用 Jquery 之前，在我使用 HTML 元素属性作为变量来设置数据之前，以及当我需要可访问的信息时在那个 HTML 元素中。

例如： 我有一个图片库，如你所知，每个图片都应该有一个标题，Alt，src 这些最初来自 HTML 但我添加了一个名为 mk-author、mk 的新属性是一个前缀，当用户单击它时图像，最大化的图像和作者的名字将显示在图像旁边。有时我得到 ID 并可能在 server-side 上做一些事情，当然我从 server-side.

验证它

问题：

1-这是一种安全的好方法吗？

2-什么是更好的方法？

Answer 1

首先，添加您自己的属性会给您一些不完全的东西 HTML；它可能工作得很好，但你最好坚持标准（future-proofing、便携性等）。此外，当标准提供 data-* attributes that everything will understand, jQuery even has special support for them through the data function.

时就不需要它们了

对于您的图片库示例，更惯用的 Backbone 方法应该是：

画廊中每张图片的模型：
```
var Image = Backbone.Model.extend({
    //...
});
```
此模型的实例将包含图像的 URL、大小、名称、作者...

一个collection来保存图片：

var Images = Backbone.Collection.extend({
    model: Image,
    //...
});

每个图像一个视图，这将为一个 Image 模型提供交互和显示：

var ImageView = Backbone.View.extend({
    events: {
        'click': 'show_details',
    },
    render: function() {
        // Build the HTML for `this.model` (an `Image`)
        // and add it to `this.$el`...
        return this;
    },
    show_details: function() {
        // The clicked image model will be `this.model`
        // so do whatever you need to.
    }
});

管理整个 collection 的视图，这主要创建 ImageViews:

var ImagesView = Backbone.View.extend({
    render: function() {
        this.collection.each(function(image) {
            var v = new ImageView({ model: image });
            this.$el.append(v.render().el);
        }, this);
        return this;
    }
});

然后你会创建你的 collection，填充它，然后说这样的话：

var v = new ImagesView({ collection: images_collection });
$(container).append(v.render().el);

演示：https://jsfiddle.net/ambiguous/6Lcwfh98/

花一点时间学习 Backbone 教程和 Backbone documentation 现在是个好主意。

从网页获取数据而不是处理 DOM 和 HTML 元素的更好方法

better way to get data from a web page instead of working on DOM and HTML Elements

html

javascript

jquery

backbone.js