Durandal Custom View Location Strategy

Question

Tôi đang cố gắng tìm hiểu cách sử dụng chiến lược vị trí chế độ xem tùy chỉnh, tôi đã đọc tài liệu tại trang này http://durandaljs.com/documentation/Using-Composition/ nhưng tôi không hiểu chính xác chức năng chiến lược sẽ trông như thế nào.

Ai có thể cho tôi một ví dụ nhanh về việc thực hiện chức năng này sẽ như thế nào và lời hứa sẽ trả về (thậm chí là một cách đơn giản), v.v ...?

Xin cảm ơn trước, Gary

p.s. Đây là mã trong html của tôi:

<div> 
    <div data-bind="compose: {model: 'viewmodels/childRouter/first/simpleModel', strategy: 
'viewmodels/childRouter/first/myCustomViewStrategy'}"></div> </div> 

và đây là mã trong myCustomViewStrategy tôi:

define(function() { 

    var myCustomViewStrategy = function() { 

     var deferred = $.Deferred(); 

     deferred.done(function() { console.log('done'); return 'simpleModelView'; }); 
     deferred.fail(function() { console.log('error'); }); 

     setTimeout(function() { deferred.resolve('done'); }, 5000); 

     return deferred.promise(); 
    }; 

return myCustomViewStrategy; 
}); 

nhưng tôi nhận được lỗi:

của router Lỗi Loại: Không thể đọc thuộc 'display' của undefined - đây là sau khi thực hiện đã được đăng nhập trong cửa sổ giao diện điều khiển.

Answer 1

Được rồi tôi giải quyết điều này bằng cách tạo ra chiến lược giao diện tùy chỉnh của tôi bằng cách như sau:

define(['durandal/system', 'durandal/viewEngine'], function (system, viewEngine) { 

    var myCustomViewStrategy = function() { 
     return viewEngine.createView('views/childRouter/first/sModelView'); 
    } 

    return myCustomViewStrategy; 

}); 

Answer 2

Như tôi đã tìm thấy các tài liệu một chút thiếu trên thiết lập chiến lược soạn thư của ràng buộc tôi đã kiểm tra mã nguồn như thế nào nó hoạt động. Để Summ nó lên:

Các module theo quy định của soạn ràng buộc của thiết lập chiến lược bởi moduleId nó

• phải trả lại một chức năng có tên là 'chiến lược'
• mà trả về một lời hứa mà kết quả trong giao diện là ràng buộc
• làm đối tượng phần tử HTML.
• Là một tham số, phương pháp chiến lược nhận đối tượng cài đặt của đối tượng soạn thảo đối tượng
• với đối tượng mô hình đã được giải quyết.

Một ví dụ làm việc:

define(['durandal/system', 'durandal/viewEngine'], function (system, viewEngine) { 

    var strategy = function(settings){ 
     var viewid = null; 
     if(settings.model){ 
      // replaces model's module id's last segment ('/viewmodel') with '/view' 
      viewid = settings.model.__moduleId__.replace(/\/[^\/]*$/, '/view'); 
     } 
     return viewEngine.createView(viewid); 
    }; 

    return strategy; 
}); 

nguồn Durandal của:

// composition.js:485 

for (var attrName in settings) { 
    if (ko.utils.arrayIndexOf(bindableSettings, attrName) != -1) { 
     /* 
     * strategy is unwrapped 
     */ 
     settings[attrName] = ko.utils.unwrapObservable(settings[attrName]); 
    } else { 
     settings[attrName] = settings[attrName]; 
    } 
} 

// composition.js:523 

if (system.isString(context.strategy)) { 
    /* 
    * strategy is loaded 
    */ 
    system.acquire(context.strategy).then(function (strategy) { 
     context.strategy = strategy; 
     composition.executeStrategy(context); 
    }).fail(function(err){ 
     system.error('Failed to load view strategy (' + context.strategy + '). Details: ' + err.message); 
    }); 
} else { 
    this.executeStrategy(context); 
} 

// composition.js:501 

executeStrategy: function (context) { 
    /* 
    * strategy is executed 
    * expected to be a promise 
    * which returns the view to be bound and inserted to the DOM 
    */ 
    context.strategy(context).then(function (child) { 
     composition.bindAndShow(child, context); 
    }); 
}