Question

我正在使用Marionette和jQuery Mobile创建一个应用程序，我遇到了渲染的html代码问题。要编译html代码，我在CompositeView的_.template(htmlCode, modelVars)方法中使用template（下划线的方法）。

我编写代码来实现我的目标：

Marionette.CompositeView.extend({
    template : function() {
        var tpl = App.Templates.get('my-vehicles-table'); //returns html template
        return _.template(tpl, {});
    },
    itemView : Module.View.MyVehicleRow,
    itemViewContainer: "tbody"
  });

在tpl变量：

中定义时，表行由JQM呈现

var htmlCode = '<table data-role="table" id="my-vehicles-table" data-mode="reflow" class="ui-responsive table-stroke">
            <thead>
                <tr class="ui-bar-d">
                    <th data-priority="2">Reg No.</th>
                    <th>VIN</th>
                    <th data-priority="3">Model</th>
                    <th data-priority="1">Type</th>
                    <th data-priority="5">Client</th>
                </tr>
            </thead>
            <tbody>
                <tr><td>DW 12345</td><td>QWER123</td><td>F12</td><td>No Contract</td><td>John Smith</td></tr>
            </tbody>
    </table>';

当tpl仅是表格的模板（不包含行）时，情境不同：

 var tpl = '<table data-role="table" id="my-vehicles-table" data-mode="reflow" class="ui-responsive table-stroke">
                <thead>
                    <tr class="ui-bar-d">
                        <th data-priority="2">Reg No.</th>
                        <th>VIN</th>
                        <th data-priority="3">Model</th>
                        <th data-priority="1">Type</th>
                        <th data-priority="5">Client</th>
                    </tr>
                </thead>
                <tbody></tbody>
        </table>';

表行仅通过CompositeView方法插入<tbody>。

如果在tpl（内部<tbody>）中声明了一些行并且CompositeView方法插入动态其他行，则结果表具有好的和坏的渲染行，这很有趣。如果在模板中声明这些是好的，如果由CompositeView添加则这些是坏的。

我想要什么？要使jQuery Mobile呈现所有行（在呈现页面时将具有特殊属性的html添加到标记中）。

谢谢！

---编辑---

问题在于时机。在渲染视图组件（VC）之前，您必须确保已获取所有数据。如果要将异步请求中的数据放入VC，在初始化它的新实例之前，请检查model's / collection的 sync 事件。

即：

    var collection = new CustomCollection();
    collection.fetch();
    $.when(collection).done(function(collectionRecords){
        collectionRecords.on('sync', function() {
            //collectionRecords has all the data you want to put into the VC
        });
    });

jQuery Mobile以奇怪的方式呈现布局

0 个答案: