将HTML代码块处理为对象？

Question

我有一个 div，基本上代表一本书（具有漂亮的 div 布局，包括书籍图片、标题、价格、如果打折则为红色背景等）。所以我从数据库中获取书籍属性，将值插入到一种 html 模板中并显示出来。

现在，一旦它被显示，我讨厌如何处理数据。我必须解析 CSS 属性来确定书籍是否打折，或者我必须在另一个地方保留数据（一些 JavaScript 数组或使用 jQuery 数据功能）。第一种选项很丑陋，第二种选项需要我更新两个东西，当一个属性改变时 - 这也很难看。

所以我想要处理表示单个书籍的 html 块作为一个对象。在那里我可以调用 obj.setPrice(30); 等等，最后调用 obj.update(); 以便更新其外观。

有没有办法实现这个？或者类似这样的东西？我只是感觉一旦我将数据渲染为 html，我就失去了对它的控制 :(

- MeanShift

---

视图计数存在问题。 - Anurag

耶，我的帖子是一个 Stack Overflow 漏洞利用 ;) - MeanShift

对于任何感兴趣的人：这也可能很有用：http://weblogs.asp.net/scottgu/archive/2010/05/07/jquery-templates-and-data-linking-and-microsoft-contributing-to-jquery.aspx （仍在尝试您所有的建议 :)） - MeanShift

Answer 1

假设你的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();

- Jayesh

---

pricediv.innerHTML = '$'+price; 转换为：pricediv.innerHTML = '$'+this.price; - MeanShift

Answer 2

我想你最好的选择是为此编写自己的对象/方法。

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();

- jAndy

Answer 3

我一直在尝试使用微软提出的jQuery模板和数据链接，目前效果非常棒。

简而言之，查看此演示。

只需将一个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 属性到我们书籍的图像属性
• 标题 div 到标题属性
• 价格 div 到价格属性

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

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

就是这样。从现在开始，只需更新书籍对象，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')

更新书籍对象的属性，更改将会反映出来。

- Anurag