将requirejs与JQuery，jQuery Mobile，Knockout和Sammy结合使用以使用外部模板构建结构化应用程序时的性能/模板问题 [英] performance / templating issues when using requirejs with JQuery, jQuery Mobile, Knockout and Sammy to build a structured app with External Templates

问题描述

我有一个用于测试应用程序的设置，其中包括require.js，jQuery，jQueryMobile(jqm)，敲除和萨米(sammy)

I have a setup for a test app which includes require.js, jQuery, jQueryMobile (jqm), knockout and sammy

require.js载入jqm，敲除和萨米(sammy)

require.js loads in jqm, knockout and sammy

我使用sammy加载了剔除viewModels.这些viewModels模板中的负载.

on the app main page i use sammy to load in knockout viewModels. these viewModels the load in the templates..

以便显示代码...

需要页面:

require.config({
    jquery:     'vendor/jqm/jquery_1.7_min',
    jqm:     'vendor/jqm/jquery.mobile-1.1.0', 
    knockout: 'vendor/knockout/knockout-2.2.0',
    sammy : 'vendor/sammy/sammy',
    text:       'vendor/require/text',
views:    '../views',
templates:  '../templates'
}

});

define(['app','jqm-config'], function(app) {
   $(document).ready(function() {
  console.log("DOM IS READY");
});    

});

app.js

define(['jquery','knockout', 'sammy','views/home/home', 'views/products/products', 'jqm'],
function($, ko, sammy, appViewModel, productsViewModel) {

var self = this;
self.goHome = function() {
    ko.applyBindings(new appViewModel());
};

self.goProducts = function() {
    ko.applyBindings(new productsViewModel());
};

 Sammy(function() {
    this.get('#home', function() {
       self.goHome(); 
    });

    this.get('#products', function() {
        self.goProducts();
    });

    this.get('', function() {
       self.goHome(); 
    });

 }).run(); 

});

产品页面

define(['jquery', 'knockout','text!templates/test2.html', 'jqm'], 
function($, ko, productsViewTemplate){


function ProductType(id, name) {
var self = this;
self.id = id;
self.name = name;
}

return function productsViewModel() {

  $('body').append(productsViewTemplate); 
  var self = this;
  self.products = ko.observableArray(); 

    var jqxhr = $.getJSON("data/product.json")
    .success(function(data, status, xhr) { 
            self.products.removeAll();    
        $.each(data.data.productTypeList, function(i,item){
           self.products.push(new ProductType(i, item.longName));

        })        
      })
     .error(function() { alert("error"); })
     .complete(function() {

         $.mobile.changePage( '#products', { transition: "pop"});

     });

}
});

产品html(text2.html)

products html (text2.html)

<div data-role="page" data-theme="c" class="ui-page" id="products">

<div data-role="header" data-position="fixed">
    <h1>Products</h1>
    <a href="#home" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
</div>

<div data-role="content">   
        <ul data-role="listview" data-inset="true"  data-bind="foreach: products" >

          <li>
            <a data-bind="attr:{href:'#products/list/' + id}, text: name"></a>
          </li>


        </ul>

</div>

有几个问题

1. 应该按此顺序加载，因为我每次刷新时都会抛出一个错误，即由于我猜测加载太慢而无法定义sammy或jquery

1. is sammy supposed to be loaded in that order because every now and again when i refresh it throws an error that sammy or jquery is not defined due too slow loading i am guessing

在产品页面上，如果有人从主页上将其加载，则可以正常加载，因为已调用jQueryMobile changePage，但是如果用户随后刷新该页面，则来自JSON的列表将失去其所有样式. /p>

on the products page if someone goes it from the homepage it loads ok because the jQueryMobile changePage has been called but if a user then refreshes that page the list that has come from the JSON looses all its styling..

我认为这是由于我从模板渲染页面然后 必须列出清单，但我想不出另一种方式.

I think this is due to the way I render the page from the template and then have to make the list but i cant think of another way of doing it.

所以我在想(可能不是最佳解决方案)，但是有没有办法强制pageChange刷新?还是有人有更好的解决方案?

so i was thinking (prob not best solution) but is there a way to force a pageChange on a refresh? or has anyone got a better solution?

3.

这是调用外部模板的最佳方法吗?是否有将模板附加到主体的更好方法.我真的认为，花时间做是造成样式问题的原因，而且当我添加下一级别的产品时，它会先在页面上呈现它们，然后再移到下一页.

Is this the best way to call in an external template / is there a better way to append the template to the body. I really think the time its taking to do that is what causing the styling issues and also when i add in the next level of products its starts rendering them on this page before moving to the next..

我正在努力寻找使用剔除和requirejs加载外部模板的最佳方法.我想将模板保留为HTML，以便团队中的其他人可以轻松地对其进行编辑并给出结构.

I am struggling to find the best way to load in external templates with knockout and requirejs. I want to keep the templates in HTML so that others in the team can edit it easily enough and to give a structure.

此演示可以在此处查看

http://demo.stg.brightonconsulting.net.au/templates /tests/knockoutJQMProducts/

真的很感谢您的帮助

推荐答案

看看您的演示，我可以建议您尝试一些方法.

Looking at your demo, I can suggest a few things to try.

1. 在main.js中，删除对jqm-config的依赖并将其添加到app.js.这样，您将始终保证在运行app.js中的任何内容之前已经设置了jquery移动配置.
2. 确保您的ko.applyBindings()调用包含在.ready()构造中.
3. 每次切换页面时，您都将剔除重新绑定到同一节点.这不是最佳做法，并且可能导致某些奇怪的行为.如果要这样做，请确保先取消应用绑定.请参见此处.

1. In main.js remove the dependency on jqm-config and add it to app.js. That way, you will always be guaranteed to have set up your jquery mobile configuration before anything in app.js is run.
2. Make sure your ko.applyBindings() call is wrapped in a .ready() construct.
3. Every single time you switch pages, you're re-binding knockout to the same node. That's not best practice and can result in some strange behavior. If you're going to do that, make sure to unapply the bindings first. See how here.

即使所有这些问题都已解决，我也不确定您处理事情的方式是否会奏效.您可能最好先加载所有HTML并将所有页面绑定到带有subviewmodels的一个父viewmodel.

Even with all those items fixed, I'm not sure that the way you're going about things will work. You may be better off loading all the HTML up front and binding all the pages to one parent viewmodel with subviewmodels.

这篇关于将requirejs与JQuery，jQuery Mobile，Knockout和Sammy结合使用以使用外部模板构建结构化应用程序时的性能/模板问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！