Question

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

我遇到的代码遇到两个问题：

如果div从初始页面加载
vmAccount视图模型在SearchForCustomerAccounts或DisplayResults中未定义，尽管它们是全局变量

＆＃13;

$(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);
  });
});

＆＃13;

<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>

＆＃13;

我是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的可观察量中获取价值，你应该调用它（展开值）。因此，请使用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失去了viewmodel

3 个答案: