2012-06-18 22 views
8

Mã sau hoạt động tốt bằng cách sử dụng Backbone.Marionette.ItemView nhưng không sử dụng Mustache.Cách sử dụng Backbone.Marionette.ItemView với Mustache

Backbone.Marionette.ItemView - no Mustache

Tôi muốn sử dụng mã tương tự nhưng tải mẫu varaible sử dụng Mustache.

Đây là mã của tôi:

Backbone.Marionette.ItemView - with Mustache

Bất cứ ý tưởng tại sao my code không hoạt động và tại sao?

Cảm ơn

Trả lời

8

Giả thiết giả định sử dụng mẫu gạch dưới JS theo mặc định. Chỉ cần thay thế cấu hình template cho chế độ xem là không đủ. Bạn cũng cần thay thế cách hoạt động của quá trình kết xuất.

Trong ví dụ đơn giản, bạn chỉ cần ghi đè lên Marionette.Renderer.render chức năng gọi Moustache, và sau đó thiết lập các template quan điểm của bạn vào mẫu chuỗi mà bạn muốn:


Backbone.Marionette.Renderer.render = function(template, data){ 
    return Mustache.to_html(template, data); 
} 

var rowTemplate = '{{ username }}{{ fullname }}'; 

// A Grid Row 
var GridRow = Backbone.Marionette.ItemView.extend({ 
    template: rowTemplate, 
    tagName: "tr" 
}); 

Lưu ý rằng JSFiddle của bạn vẫn thắng 't làm việc ngay cả khi bạn đặt mã này tại chỗ, vì GridView vẫn đang sử dụng bộ chọn/chuỗi jQuery làm thuộc tính template. Bạn sẽ cần phải thay thế điều này bằng cùng một loại hàm template để trả về bộ ria mép.

http://jsfiddle.net/derickbailey/d7qDz/

+1

Nhìn vào nguồn (http://derickbailey.github.com/backbone.marionette/docs/backbone.marionette.html#section-115) có vẻ như với tôi rằng nó đủ để ghi đè 'Backbone.Marionette. TemplateCache.prototype.compileTemplate': http://jsfiddle.net/me4NK/78/ Cách thích hợp hơn là gì? – theotheo

+2

tùy thuộc vào việc bạn có đang sử dụng hành vi mặc định của việc chọn mẫu từ DOM hay không hoặc cung cấp mẫu dưới dạng chuỗi thô. Trong trường hợp của câu hỏi này, khuôn mẫu là một chuỗi thô, vì vậy việc ghi đè 'Renderer.render' là phù hợp hơn. Tuy nhiên, nếu mẫu là một thẻ DOM '

14

Tôi muốn cập nhật câu trả lời ở đây một chút như tôi đã chỉ vật lộn với điều này; và tôi đã sử dụng câu trả lời này làm tài liệu tham khảo.

Dưới đây là những phát hiện của tôi:

Câu trả lời ở đây là một chút ra khỏi ngày với phiên bản hiện tại của Moustache (đó là dễ hiểu vì nó khá cũ)

  • Mustache.to_html là hiện không còn được dùng nữa, nhưng vẫn tồn tại dưới dạng trình bao bọc đơn giản xung quanh Mustache.render cho tính năng tương thích ngược. Check out this link.

Bên cạnh đó, tôi thấy trọng Marionette.Renderer.render, như trong câu trả lời được chấp nhận ở trên, hoàn toàn bỏ qua Marionette.TemplateCache lớp trong đó có thể không phải là hành vi mong muốn.

Đây là nguồn cho các Marionette.Renderer.render phương pháp:

// Source: http://bit.ly/1f7CBRy 

render: function(template, data){ 

    if (!template) { 
    var error = new Error("Cannot render the template since it's false, null or undefined."); 
    error.name = "TemplateNotFoundError"; 
    throw error; 
    } 

    var templateFunc; 
    if (typeof template === "function"){ 
    templateFunc = template; 
    } else { 
    templateFunc = Marionette.TemplateCache.get(template); 
    } 

    return templateFunc(data); 
} 

Như bạn có thể nhìn thấy nó truy cập vào Marionette.TemplateCache.get phương pháp và câu trả lời ở trên không có gì để duy trì chức năng .

Bây giờ để có được để giải quyết của tôi (lưu ý: các câu trả lời trên là không sai hẳn, đây chỉ là cách tiếp cận của tôi để duy trì lớp Marionette.TemplateCache):

Theo các ý kiến ​​đề nghị trên, ghi đè compileTemplate thay thế:

Marionette.TemplateCache.prototype.compileTemplate = function(rawTemplate) { 

    // Mustache.parse will not return anything useful (returns an array) 
    // The render function from Marionette.Renderer.render expects a function 
    // so instead pass a partial of Mustache.render 
    // with rawTemplate as the initial parameter. 

    // Additionally Mustache.compile no longer exists so we must use parse. 
    Mustache.parse(rawTemplate); 
    return _.partial(Mustache.render, rawTemplate); 
}; 

Here's a working JSFiddle as proof.

Trong fiddle tôi cũng đã ghi đè Marionette.TemplateCache.loadTemplate để chứng minh rằng nó chỉ được gọi một lần. Phần thân của hàm chỉ thêm một số đầu ra gỡ lỗi và sau đó thực hiện lại hầu hết chức năng ban đầu (xử lý lỗi trừ).

+0

Điều này sẽ được đánh dấu là câu trả lời đúng. –

Các vấn đề liên quan