重新加载视图和视图模型答案

【问题标题】：Reloading View and ViewModel重新加载视图和视图模型
【发布时间】：2015-06-25 10:24:00
【问题描述】：

我是网络新手，尤其是单页应用程序。我有一个主菜单，我在其中调用程序 HomePage 加载 Div class="PhotoStack" 并创建 ViewModel ScatteredGallaryMVVM：

function HomePage() {

    $.ajax({
        url: "/Home/Home",
        type: "GET",
        cache: false
    })
    .done(function (data, textStatus, jqXHR) {

        var contentObject = $(data)[0];

        $(".MainContent").empty();
        $(".MainContent").append(contentObject);

        if (!window.hasOwnProperty("scatteredGallaryMVVM")) {
            window.scatteredGallaryMVVM = new ScatteredGallaryMVVM();
            ko.applyBindings(window.scatteredGallaryMVVM, $(".MainContent")[0]);
        }

        window.scatteredGallaryMVVM.FillGallary();

    })
    .fail(function (jqXHR, textStatus, errorThrown) {
        alert(jqXHR.status);
    });


function ScatteredGallaryMVVM() {

   var self = this;
   self.Products = ko.observableArray();

   self.FillGallary = function () {

       $.ajax({
           url: '/Products/GetProducts',
           type: 'GET',
           dataType: 'json'
        })
        .done(function (data, textStatus, jqXHR) {
            self.Products(data);
        })
        .fail(function (jqXHR, textStatus, errorThrown) {
            alert(jqXHR.status);
        });

};  

 <div class="PhotoStack" data-bind="foreach: Products">
    <figure class="PhotoStackFigure">
        <a class="PhotoStackHyperlink">
         <img class="PhotoStackImage" data-bind="attr: { src: ImageUrl }"></img>
        </a>
        <figcaption>
           <p data-bind="text: Object.Name"/>
        </figcaption>
    </figure>
 </div>

索引主页

 <html>
<head>
     <meta name="viewport" content="width=device-width" />
     <title>Index</title>
     @Styles.Render("~/Content/css")
     @Scripts.Render("~/bundles/Site")
     @Scripts.Render("~/bundles/jquery")
     @Scripts.Render("~/bundles/knockout")
 </head>
 <body>
    <div class="MainCanvas">
         @Html.Partial("~/Views/Index/MainMenu.cshtml")
         <div class="MainContent">
         </div>
     </div>
  </body>
  </html>

当我第一次调用HomePage 时，它运行良好。但是当我再次调用HomePage 时它不起作用（尽管我从服务器获得了 8 个对象，但 div 有 1 个没有任何数据的数字）。 PS：对不起我的英语。

【问题讨论】：

标签： javascript html asp.net-mvc knockout.js single-page-application

【解决方案1】：

看到你做了一个 ajax 调用。 ajax 调用后没有回发，因此您的浏览器不知道视图模型中的更改要完成此操作，您需要在 ajax 调用的成功方法（在您的情况下完成）或使用更新页面的 dom 元素像 knockoutjs 或 angular 这样的绑定库。

编辑：

因为您已经在使用淘汰赛。在 ajax 成功中操作 dom 元素是没有意义的，就像您通过将 html 删除并注入到 $(".MainContent") 中所做的那样。

为您的 MainContent 创建一个 ViewModel 并对其应用绑定。这样做你不再需要操纵 dom 元素。您的 ajax 应该尽可能干净，仅将您响应的绑定和映射应用到您的 ViewModel。

【讨论】：

嗨。我没听懂你的回答。正如您在这种情况下所看到的，我已经使用了绑定库敲除，它在第一个过程调用中运行良好。我认为问题在于在 .MainContent 中删除 DIV 并在 .MainContent 中再次插入 DIV。 MainContent 当我第二次调用该过程时。但是，如果我做 SPA，如何避免它（重新插入）？
你说得对@MadBoy 我弄混了，对不起。所以，问题是，当您需要在 ajax 成功方法中操作 dom 元素时，意味着您的淘汰视图模型/mvc 视图模型结构不正确。 MainCONntent 也应该有它的 observables（父视图模型）。你明白我的意思吧？
不是真的）我刚刚添加了有问题的索引（主）页面（html）。我应该创建主 ViewModel 并将其他 ViewModel 添加为属性吗？可以给我看看吗？
我更新了我的答案，试试这个例子，很容易理解：jsfiddle.net/madcapnmckay/EYueU
我必须在 MainContent @Daniel Groh 中删除和插入 HTML，因为它是 SPA，因此可能会有不同的内容，例如产品列表或卡片表单或主页或关于页面或其他内容（这取决于在您单击主菜单中的哪个按钮上）。您的示例运行良好，但不适用于我的情况。