将 HTML 代码块作为对象处理？

Question

我有一个 div，它基本上代表一本书（所以一个很好的 div 布局，带有书的图像、标题、价格、红色背景（如果出售）等）。所以我要做的是从数据库中获取一本书的属性，以 html 模板的形式插入值并显示它。

现在，一旦它显示出来，我就讨厌我必须如何处理数据。我必须解析 css 属性来确定一本书是否在打折，或者我必须将数据保存在另一个地方（一些 javascript 数组或使用 jquery 数据功能）。第一个选项很丑，第二个选项需要我在一个属性更改时更新两件事 - 这也很丑。

所以我想要将那个 html 块（代表一本书）作为一个对象来处理。我可以在哪里调用 obj.setPrice(30);和类似的事情，最后调用 obj.update();所以它会更新它的外观。

有没有办法做到这一点？或类似的东西？我只是觉得一旦我将数据呈现为 html，我就会失去对它的控制:(

Answer 1

我一直在玩弄微软关于jQuery Templates 和Data Linking 的提议，到目前为止它进展顺利。

TLDR, checkout this demo.

将一段 HTML 与一个 JavaScript 对象链接起来非常容易，然后只更新 JavaScript 对象，HTML 就会自动更新。

这是一个简单的例子。创建代表您的小部件的 HTML。

<div class="book">
    <img width="100" height="100" src="" />
    <div class="title"></div>
    <div class="price"></div>
</div>

然后创建一个 JavaScript 对象并将其动态链接到上面的 HTML。这是一个示例对象：

var book = {
    title: "Alice in Wonderland",
    price: 24.99,
    onSale: true,
    image: "http://bit.ly/cavCXS"
};

现在到实际的链接部分。我们要链接的项目是：

• 外部 div 中的 data-onsale 属性将是“true”或“false”
• 图像src 属性为我们图书的图像属性
• title 属性的title div
• price div 到 price 属性

以下设置链接。请注意，我们在这里只进行单向链接，但也可以使用 linkBoth 函数设置双向链接。

$(book)
    .linkTo('title', '.title', 'html')
    .linkTo('price', '.price', 'html')
    .linkTo('image', '.book img', 'src')
    .linkTo('onSale', '.book', 'data-onsale')

就是这样。从现在开始，只需更新 book 对象，HTML 就会自动更新。更新图书的属性，就像使用 attr 函数更新 html 属性一样。

$(book).attr({
    price: 14.75
});

或

$(book).attr('price', 14.75);

---

上面的代码只使用了数据链接，但提案还提到了将数据链接与模板结合起来，这将使这更加容易。据我估计，您将能够做到这一点并获得上述功能：

<script id="bookTemplate" type="text/html">
    <div class="book" data-onsale="{{link onSale }}">
        <img width="100" height="100" src="{{link image }}" />
        <div class="title">{{link title }}</div>
        <div class="price">{{link price }}</div>
    </div>
</script>

将上述模板与图书对象一步链接并添加到页面中：

$('#bookTemplate').render(book).appendTo('body')

更新书本对象的属性，变化会反映出来。

Answer 2

我猜你最好的办法就是为此写自己的object / methods。

var Book = function(){
    var price    =   args.price  || 0,
        color    =   args.color  || 'red',
        height   =   args.height || '200px',
        width    =   args.width  || '600px',
        template =   "<div style='background-color: COLOR; width=WIDTH; height: HEIGHT;'><span>$PRICE</span><br/></div>";

    return {
        setPrice:  function(np){
             price = np;
             return this;
        },
        setColor:  function(nc){
             color = nc;
             return this;
        },
        setHeight: function(nh){
             height = nh;
             return this;
        },
        render:    function(){
             template = template.replace(/COLOR/, color);
             template = template.replace(/PRICE/, price);
             // etc
             // use jQuery or native javascript to form and append your html
             $(template).appendTo(document.body);
        }
    };
};

这只是一个非常基本的示例，可以进行很多优化。你甚至可以考虑使用John Resigs微模板（http://ejohn.org/blog/javascript-micro-templating/）

上例的用法如下：

var book = Book({
    price:  30,
    color:  'blue'
});

book.render();

更改值：

book.setPrice(140).setColor('yellow').setHeight('500').render();

Answer 3

假设你的 html div 是这样的

<div id="book1">
<div id="price">$30</div>    
...
</div>

您可以按如下方式定义 Book 对象：

var Book = function(name) {
   this.name = name;
}

Book.prototype = {
   setPrice : function(price) {
      this.price = price;
   },
   update : function() {
      pricediv = document.getElementById(this.name)
      pricediv.innerHTML = '$'+price;
   }
}

var book = new Book('book1')
book.setPrice(50);
book.update();