Knockout.js Asp.net mvc4、淘汰js、淘汰ViewModel是否为所有视图加载？
我不熟悉asp.net mvc4和knockoutjs，需要帮助了解视图的工作方式 我在共享文件夹中有一个_Layout.vbhtml，它是项目中所有页面的母版页 我有AccountController、HomeController和GrowerController 我在视图文件夹中有GrowerController的Grower文件夹。和往常一样，索引是默认视图 在Views/Grower/Index中，我有一个Knookout ViewModel，它从服务器检索数据 现在，当我转到其他视图（如Home/Index）时，我在Firebug的控制台中看到，它正在进行这些调用以从服务器获取数据，即使我不在创建knockout ViewModel的视图中 我很困惑。这是因为我对所有页面都使用了_layout.vbhtml吗？我做错了什么 编辑： *_Layout.vbhtml* Grower/Index.vbhtmlKnockout.js Asp.net mvc4、淘汰js、淘汰ViewModel是否为所有视图加载？,knockout.js,asp.net-mvc-4,Knockout.js,Asp.net Mvc 4,我不熟悉asp.net mvc4和knockoutjs，需要帮助了解视图的工作方式 我在共享文件夹中有一个_Layout.vbhtml，它是项目中所有页面的母版页 我有AccountController、HomeController和GrowerController 我在视图文件夹中有GrowerController的Grower文件夹。和往常一样，索引是默认视图 在Views/Grower/Index中，我有一个Knookout ViewModel，它从服务器检索数据 现在，当我转到其他视图（
如果没有看到您的_Layout.vbhtml，我不能肯定，但是由于您在每个页面上都运行javascript，因此您可能在_Layout.vbhtml上有您的脚本标记 因此，将其移动到Index.vbhtml中，或将其放置在标记中，请在Layout.vbhtml中使用@RenderSectionScripts，并在视图中使用：
@Section "Scripts"
@<script>
// write JS here or reference a file using the src attribute
</script>
End Section
每当获取id=PageId的文件并将其注入DOM时，都会运行此操作。您可以在此处使用任何选择器，因此。当注入class=require-vm的页面时，可以使用require-vm触发。您已经在布局页面中定义了淘汰视图模型 如果您打算在所有页面上使用此视图模型，这是很好的，但听起来好像您不想这样做。将其移动到“特定操作”视图中以将其隔离 在上面对Sethi的评论中，您提到当您这样做时javascripts不起作用。。。这可能是因为您在布局和视图中都放置了脚本标记。我敢打赌，您正在尝试在加载knockout.js之前构建视图模型 良好做法： 在布局中，将脚本标记放在页面底部，就在关闭标记之前。。。关闭前的最后一个标记应该是设置好的RenderSection调用 现在，您可以在视图中的任何地方定义这个脚本部分，并确保它将在您的框架脚本（例如jQuery、Knockout等）之后出现
另外，请记住，使用jQuery时，最好使用$.ready，以确保脚本仅在加载DOM后运行。My\u layout.vbhtml有一个@RenderSectionscripts，required:=False，在关闭后但在正文内。对于javascript，我不使用index.vbhtml中的Scripts部分，因为如果我这样做，javascripts将不起作用。My knockout.js包含在_layout的标记中，应该可以用于使用_layout.vbhtml的每个页面。我正在使用$document.bind'pageinit'，函数{根据jQuery移动推荐，并在其中执行ko.applyBindings。不知道这是否是问题所在，它认为pageinit是页面的全局初始化，因此ko模型正在加载所有视图？创建脚本部分并在该视图中移动jscript没有帮助。请提出建议。另外，为了澄清，淘汰视图模型是i在特定视图中，而不是在_布局中。我已经将其移动到脚本部分，javascript似乎通过在$document.bind'pageinit'函数中执行$divID.hide来打破隐藏一个div的局面{，但div显示，将js移出部分脚本是有效的。在每个Firebug的每个视图导航中，敲除viewmodel中定义的所有函数调用仍在执行。请注意，如果我将ko viewmodel移动到特定视图的脚本部分，则在刷新页面之前，它根本不会加载！不知道发生了什么。在我的原始邮件中添加了_Layout.vbhtml和Grower/Index.vbhtml标记。
@Code
ViewData("Title") = "Select a Grower/Branch"
End Code
@section scripts
<script type="text/javascript">
function SuperViewModel() {
//====== GrowerInfo =======
var self = this;
self.GrowerName = ko.observable();
self.GrowerCompany = ko.observable();
self.GrowerAddress = ko.observable();
self.ShowGrowerCompany = ko.observable();
self.GrowerID = ko.observable();
self.updateGrowerInfo = function () {
$.getJSON("GetGrower", function (allData) {
self.GrowerName(allData.Name);
self.GrowerCompany(allData.CompanyName);
self.GrowerAddress(allData.Address);
self.ShowGrowerCompany(allData.ShowCompany);
self.GrowerID(allData.ID);
});
};
//Load initial state from server and populate viewmodel
self.updateGrowerInfo();
//========= End GrowerInfo ==========
if ($("#hfFlag").val() == "1") {
//========= BranchInfo ==========
self.BranchName = ko.observable();
self.Company = ko.observable();
self.Address = ko.observable();
self.ID = ko.observable();
//Load initial state from server and populate viewmodel
self.updateBranchInfo = function () {
$.getJSON("GetBranch", function (allData) {
self.BranchName(allData.Name);
self.Company(allData.CompanyName);
self.Address(allData.Address);
self.ID(allData.ID);
});
};
self.updateBranchInfo();
//=========== End BranchInfo ==============
}
//=============== GrowerList ===============
var MyGrower = function (data) {
this.growerId = ko.observable(data.GrowerId);
this.growerName = ko.observable(data.GrowerName);
};
self.growers = ko.observableArray([]);
self.updateGrowers = function () {
//refresh listview
$("#ulGrowerList").listview();
$("#ulGrowerList").listview("refresh");
$.getJSON("GetGrowers", function (allData) {
var mappedGrowers = $.map(allData, function (item) { return new MyGrower(item) });
self.growers(mappedGrowers);
});
};
self.setSelectedClassToGrowerList = function (item, event) {
$(ulGrowerList).closest('ul').find('a').removeClass('highlight');
$(ulGrowerList).closest('ul').find('.selected').remove();
$(event.target).toggleClass("highlight");
if ($(event.target).hasClass("highlight")) {
$(event.target).append("<span class='selected'>Selected</span>");
replaceByValue('GrowerID', event.target.id);
postjsonToServerNow("grower");
//update GrowerInfo
$.getJSON("GetGrower", function (allData) {
self.GrowerName(allData.Name);
self.GrowerCompany(allData.CompanyName);
self.GrowerAddress(allData.Address);
self.ShowGrowerCompany(allData.ShowCompany);
self.GrowerID(allData.ID);
});
} else {
$(event.target).find(".selected").remove();
}
};
self.setSelectedClassToBranchList = function (item, event) {
$(ulBranchList).closest('ul').find('a').removeClass('highlight');
$(ulBranchList).closest('ul').find('.selected').remove();
$(event.target).toggleClass("highlight");
if ($(event.target).hasClass("highlight")) {
$(event.target).append("<span class='selected'>Selected</span>");
replaceByValue('BranchID', event.target.id);
postjsonToServerNow("branch");
} else {
$(event.target).find(".selected").remove();
}
};
//Load initial state from server and populate viewmodel
self.updateGrowers();
//============ End GrowerList =============
}
//============= End ViewModel Section ====================//
$(document).bind('pageinit', function () {
//enable ko
ko.applyBindings(new SuperViewModel());
$("#divBranchList").hide();
//show hide lists
$("#btnGrower").click(function () {
$("#divGrowerList").show();
$("#divBranchList").hide();
});
$("#btnBranch").click(function () {
$("#divBranchList").show();
$("#divGrowerList").hide();
});
});
</script>
End Section
<table class="maintable" id="maintable">
<tr>
<td class="left">
<div id="GrowerInfo">
<strong>Grower</strong><br />
<a data-role="button" data-theme="e" id="btnGrower" data-bind="click: updateGrowers">
<h3>
<span data-bind="text: GrowerName"></span>
</h3>
<span data-bind="text:GrowerCompany, visible: ShowGrowerCompany" class="block"></span><span data-bind="text: GrowerAddress">
</span>
<br />
<span data-bind="text: GrowerID"></span>
</a>
</div>
@If ViewData("IsDealer") Then
@<div id="BranchInfo">
<strong>Branch</strong> <a data-role="button" data-theme="e" id="btnBranch">
<h3>
<span data-bind="text: BranchName"></span>
</h3>
<span data-bind="text: Company"></span>
<br />
<span data-bind="text: Address"></span>
<br />
<span data-bind="text: ID"></span></a>
</div>
End If
</td>
<td class="splitline">
</td>
<td class="right">
<div class="content-right">
<div id="divGrowerList" style="overflow: auto; height: 450px; padding: 10px;">
<p>Total growers: <span data-bind="text: growers().length"> </span></p>
<ul data-inset="true" data-filter="true" data-bind="foreach: growers" data-role="listview" id="ulGrowerList">
<li><a data-bind="click: $parent.setSelectedClassToGrowerList, attr: {id: growerId}"><span data-bind="text: growerName, attr: {id: growerId}, click: $parent.setSelectedClassToGrowerList" /></a></li>
</ul>
<textarea name="growers" rows="10" data-bind="value: ko.toJSON(growers)"></textarea>
</div>
<div id="divBranchList">
@If ViewData("IsDealer") Then
@Html.Action("MyBranchList2")
End If
</div>
@If ViewData("IsDealer") Then
@<input type="hidden" id="hfFlag" value="1" />
Else
@<input type="hidden" id="hfFlag" value="0" />
End If
</div>
</td>
</tr>
</table>
@Section "Scripts"
@<script>
// write JS here or reference a file using the src attribute
</script>
End Section
$(document).on('pageinit', '#PageId', function(event) {
/* do viewmodel stuff here */
});