Обрабатывать блок кода HTML как объект?

Question

У меня есть div, который в основном представляет книгу (поэтому хороший макет div с изображением книги, названием, ценой, красным фоном, если он есть в продаже и т. Д.).Так что я делаю, чтобы получить свойства книги из базы данных, вставить значения в виде HTML-шаблона и отобразить его.

Теперь, когда он отображается, я ненавижу то, как я должен обрабатывать данные.Мне нужно либо разобрать свойства css, чтобы выяснить, продается ли книга для примера, либо мне нужно хранить данные также в другом месте (некоторый массив javascript или использовать функцию данных jquery).Первый вариант уродлив, второй требует, чтобы я обновлял две вещи при изменении одного свойства, что тоже ужасно.

Так что мне бы хотелось обработать этот блок html (представляющий одну книгу).) как объект.Где я могу позвонить obj.setPrice (30);и тому подобное, и, наконец, вызовите obj.update ();так что это обновит его внешний вид.

Есть ли способ сделать это?Или как то так?Я просто чувствую, что как только я рендеринг данных в виде HTML, я теряю контроль над ним: (

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

Answer 2

Я поигрался с предложением Microsoft о jQuery Templates и Связывание данных , и пока все идет отлично.

TLDR,ознакомьтесь с этой демонстрацией .

Очень просто просто связать фрагмент 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"
};

Теперь перейдем к фактической части связывания.Элементы, которые мы собираемся связать:

• A data-onsale атрибут во внешнем div, который будет либо «истинным», либо «ложным»
• Изображение srcатрибут для свойства изображения нашей книги
• заголовок div для свойства заголовка
• ценовой div для свойства цены

Следующее устанавливает связь.Обратите внимание, что здесь мы выполняем только одностороннее связывание, но можно установить двухстороннее связывание также с помощью функции linkBoth.

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

Вот и все.Отныне просто обновляйте объект книги, и HTML-код будет автоматически обновляться.Обновите свойства книги, как если бы вы обновляли атрибуты html, используя функцию attr.

$(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')

Обновите свойства объекта book, и изменения будут отражены.

Answer 3

Полагаю, ваш лучший снимок - написать свой 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();