使用mvc3的單頁面應用程序knockout.js和sammy.js

我被困在我的項目的一個特定部分，它由標題中提到的組件組成。使用mvc3的單頁面應用程序knockout.js和sammy.js

我現在有一個概念證明的作品，我希望它的工作方式：

薩米被整合進入淘汰賽的ViewModels（按照教程在淘汰賽網站）
意見由控制器按需加載（所以我沒有定義應用程序頁面上的每個單一視圖）我實例

在我目前的狀況的ViewModels應用程序啓動時（如果我這樣做不是實例，Sammy不會處理路由）。問題在於視圖由Sammy加載並交換。我必須打電話給ko.applyBindings以便綁定到視圖。但是它的不好的做法是反覆地申請申請。

我的問題，我如何綁定到我的視圖加載點播？我不能調用ko.applybindings，因爲當視圖加載多次時會造成內存泄漏。

下面是一個例子VM與違規ko.applyBindings：

function serviceInfoVm() { 
var self = this; 

self.ObjectKey = ko.observable(); 
self.Service = ko.observable(); 

self.LoadService = function() { 
    $.get('ServiceData/Detail', { serviceId: self.ObjectKey() }, function (data) { 
     self.Service(data); 
    }); 
}; 

$.sammy('#content', function() { 
    this.get('#/service/:id', function (context) { 
     var ctx = context; 
     self.ObjectKey(this.params['id']); 

     self.LoadService(); 

     $.get('Content/ServiceInfo', function (view) { 
      ctx.app.swap(view); 
      ko.applyBindings(self); 
     }); 
    }); 

}).run(); 
};

任何人只要有一些指針和/或解決這個問題？

來源

2012-08-06 Flores

是否有您要使用薩米交換，而不是淘汰賽模板理由嗎？看看html文件插件中的外部模板https://github.com/ifandelse/Knockout.js-External-Template-Engine應該做你需要的東西（如果我理解正確） – 2012-08-06 16:06:58

我想加載視圖動態..但現在放棄了這個想法。在下面看到我自己的答案 – Flores 2012-08-07 07:33:12

不是一個解決方案，但另一種方法：

端以放棄動態加載的意見的想法。現在我的觀點一直存在於網頁和能見度這段代碼觸發：

var app = function() { 
var self = this; 

self.State = ko.observable('home'); 

self.Home = ko.observable(new homepageVm()); 
self.User = ko.observable(new userInfoVm()); 

$.sammy(function() { 

    this.get('#/', function (context) { 
     self.State('home'); 
    }); 

    this.get('#/info/:username', function (context) { 
     self.State('user'); 
     self.User().UserName(context.params['username']); 
     self.User().LoadInfo(); 
    }); 

}).run();

};

而且div可見被觸發這樣：

<div id="homeView" data-bind="with: Home, visible: State() === 'home'">

這樣的ko.applyBindings只需要調用應用程序啓動時，一次。上面的viewmodel綁定到我們的shell頁面。

更多關於此here

來源

2012-08-07 06:56:25 Flores

在調用返回的模板中的特定元素上applyBindings是一個選項：

ko.applyBindings(viewModel, htmlNode)

也看到這個問題是關於延遲加載模板：knockout.js - lazy loading of templates

和文檔這裏applyBindings：http://knockoutjs.com/documentation/observables.html

來源

2012-08-06 15:28:58

您在viewmodel中擁有Sammy代碼，如果該視圖模型將存在並且您希望加載子視圖模型和視圖，則該代碼可以很好地工作。所以我認爲這就是你想要做的。 Food for thought ...將sammy代碼分成它自己的模塊（我在router.js中調用我的路由器），並讓它管理與任何viewmodel分開的導航。

但是回到代碼中...您可以設置您的子視圖和子視圖模型，並在調用sammy.get之前在它們上使用applybindings。基本上，你是提前註冊你的路線。然後，sammy.get只是導航到已經綁定了數據的新視圖。

來源

2012-08-06 16:34:50

使用mvc3的單頁面應用程序knockout.js和sammy.js

回答

相關問題