KnockoutJS 失去了视图模型

Question

我在概念验证方面遇到了一些问题。我正在尝试做的是单击按钮时出现 jQuery 对话框。对话框内容绑定到视图模型，对话框调用 json 服务来检索一些数据以填充该视图模型。

运行我这里的代码有两个问题：

仅当 div 从初始页面加载可见时，vmAccount 视图模型才会绑定
vmAccount 视图模型在 SearchForCustomerAccounts 或 DisplayResults 中未定义，尽管它是那些的全局变量

$(function() {

  var vmAccount = function() {
    var self = this;
    this.Accounts = ko.observableArray();
    this.Name = ko.observable('Jimmy');
  };

  function DisplayDialog() {

    $("#Dialog").dialog({
      resizable: false,
      height: 140,
      modal: true,
      buttons: {
        "Search": function() {
          SearchForCustomerAccounts();

        },
        Cancel: function() {
          $(this).dialog("close");
        }
      }
    });
  }

  function SearchForCustomerAccounts() {
    console.log("Name: " + vmAccount.Name);
    $.ajax({
      url: "api/CustomerSearchController/" + vmAccount.Name,
      type: "GET",
      dataType: "json",
      success: function(data) {
        DisplayResults(data);
      }
    });
  }

  function DisplayResults(data) {
    vmAccount.Accounts.removeAll();
    for (var i = 0; i < data.length; i++) {
      vmAccount.Accounts.push(data[i]);
    }
  };

  $("#butSearch").button().on("click", function() {
    DisplayDialog();
  });

  $(document).ready(function() {
    ko.applyBindings(vmAccount);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<body>
  <button id="butSearch">Open</button>

  <div id="Dialog" style="visibility: visible">
    <form id="Account">
      <p>Customer Name</p>
      <input type="text" data-bind="value: Name" />
    </form>
  </div>

</body>

我是 javascript 和淘汰赛的新手，所以它可能缺少一些简单的东西。感谢你们提供的任何帮助，谢谢！

Answer 1

代码应该看起来像这样，vmAccount 是空的，因为函数没有返回任何东西；

var vmAccount = function() {
var self = this;
this.Accounts = ko.observableArray();
this.Name = ko.observable('Jimmy');
return this;

};

Answer 2

1) 你的 vmAccount 是函数，但你尝试像实例一样使用它。

2) 要从 KO 的 observable 中获取值，您应该调用它 (unwrap value)。所以使用 vmAccount.Name() 而不是 vmAccount.Name.

$(function() {

  function VmAccount () {
    var self = this;
    this.Accounts = ko.observableArray();
    this.Name = ko.observable('Jimmy');
  };
  
  var vmAccount = new VmAccount();

  function DisplayDialog() {

    $("#Dialog").dialog({
      resizable: false,
      height: 140,
      modal: true,
      buttons: {
        "Search": function() {
          SearchForCustomerAccounts();

        },
        Cancel: function() {
          $(this).dialog("close");
        }
      }
    });
  }

  function SearchForCustomerAccounts() {
    console.log("Name: " + vmAccount.Name());
    $.ajax({
      url: "api/CustomerSearchController/" + vmAccount.Name(),
      type: "GET",
      dataType: "json",
      success: function(data) {
        DisplayResults(data);
      }
    });
  }

  function DisplayResults(data) {
    vmAccount.Accounts.removeAll();
    for (var i = 0; i < data.length; i++) {
      vmAccount.Accounts.push(data[i]);
    }
  };

  $("#butSearch").button().on("click", function() {
    DisplayDialog();
  });

  $(document).ready(function() {
    ko.applyBindings(vmAccount);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<body>
  <button id="butSearch">Open</button>

  <div id="Dialog" style="visibility: visible">
    <form id="Account">
      <p>Customer Name</p>
      <input type="text" data-bind="value: Name" />
    </form>
  </div>

</body>

Answer 3

$(function() {

  var vmAccount = {
    Accounts : ko.observableArray(),
    Name : ko.observable('Jimmy'),
  };

  function DisplayDialog() {

    $("#Dialog").dialog({
      resizable: false,
      height: 140,
      modal: true,
      buttons: {
        "Search": function() {
          SearchForCustomerAccounts();

        },
        Cancel: function() {
          $(this).dialog("close");
        }
      }
    });
  }

  function SearchForCustomerAccounts() {
    console.log("Name: " + vmAccount.Name());
    $.ajax({
      url: "api/CustomerSearchController/" + vmAccount.Name(),
      type: "GET",
      dataType: "json",
      success: function(data) {
        DisplayResults(data);
      }
    });
  }

  function DisplayResults(data) {
    vmAccount.Accounts.removeAll();
    for (var i = 0; i < data.length; i++) {
      vmAccount.Accounts.push(data[i]);
    }
  };

  $("#butSearch").button().on("click", function() {
    DisplayDialog();
  });

  $(document).ready(function() {
    ko.applyBindings(vmAccount);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<body>
  <button id="butSearch">Open</button>

  <div id="Dialog" style="visibility: visible">
    <form id="Account">
      <p>Customer Name</p>
      <input type="text" data-bind="value: Name()" />
    </form>
  </div>

</body>

KnockoutJS 失去了视图模型

KnockoutJS losing the viewmodel

javascript

jquery

mvvm

knockout.js