Question

我有布局

<div id="region">
<h1>Header</h1>
<ul class="items">
    <li>Number = 1</li>
    <li>Number = 2</li>
    <li>Number = 3</li>
</ul>
</div>

从后端渲染如何从标记中获取数据并仅渲染新的ItemView并删除那些不在json文件中的数据

    class Collections extends Backbone.Collection
          initialize: ->
            console.log 'Collections init'


    class NowListning extends Marionette.CompositeView
          template :  _.template("<h1>Header</h1> <ul class='items'></ul>")
          itemView: NowListningItem
          itemViewContainer: '.items'
          initialize : ->
            console.log 'init:: View: Local -> NowListning'



   class NowListningItem extends Marionette.ItemView
          template :  _.template("<%= text %>")
          tagName: "li"     

   domData = []
        $('items li').each ->
          item:
            text: $(this).text()
          domData.push(item)

   collections = new Collections(domData)
        nowListning = new NowListning
        collections.fetch
          url: 'items.json'

如果我创建区域并调用Show方法，它会更改CompositeView，但我只想更新列表，而不是标题

json 
[
 {
   "text": "Number = 3"
 },
 {
   "text": "Number = 4"
 }
]

我想看看

<div id="region">
    <h1>Header</h1>
    <ul class="items">
        <li>Number = 3</li>
        <li>Number = 4</li>
    </ul>
    </div>

Answer 1

要从标记中获取数据，您可以使用Jquery解析html，但我不建议这样做。更好的方法是将数据属性添加到从服务器接收的html hode：

例如：

<div id="region" data-collection='[{ "id" : 1, "text": "Number = 1" }, { "id" : 2, "text": "Number = 2" }, { "id" : 3, "text": "Number = 3" }]'>
    <h1>Header</h1>
    <ul class="items">
        <li>Number = 1</li>
        <li>Number = 2</li>
        <li>Number = 3</li>
    </ul>
</div>

因此，当您渲染collectionView时，您可以轻松获得初始集合。（例如，在初始化时）。

稍后，您调用.fetch（）集合将与json结果合并。 .fetch（）几乎没有合并行为 - 你可以选择适合你，在这种情况下我认为'重置'

您还可以查看Derick's article类似问题。

Marionette js查看来自html和渲染的解析数据

1 个答案: