1

こんにちは、observableArray を使用して foreach を実行しようとしています。

Uncaught Error: Unable to parse bindings.
Message: ReferenceError: Nome is not defined;
Bindings value: text: Nome

ここに私のHTMLがあります:

<table data-bind="foreach: funcionarios">
    <tr>
        <p>Nome: <span data-bind="text: Nome"></span></p>
        <p>Apelido: <span data-bind="text: Apelido"></span></p>
        <p>Hobby: <span data-bind="text: Hobby"></span></p>
        <p>Função: <span data-bind="text: Funcao"></span></p>
        <p>Ramal: <span data-bind="text: Ramal"></span></p>
        <p>Email: <span data-bind="text: Email"></span></p>
        <p>Celular: <span data-bind="text: Celular"></span></p>
        <p>Aniversário: <span data-bind="text: Aniversario"></span></p>
    </tr>
</table>

ここに私のJがあります：

var FuncionarioViewModel = function () {
    var me = this;

    function Funcionario(base, id, nome, apelido, hobby, funcao, ramal, email, celular, aniversario) {
        var me = this;

        me.Id = id;
        me.Nome = ko.observable(nome);
        me.Apelido = ko.observable(apelido);
        me.Hobby = ko.observable(hobby);
        me.Funcao = ko.observable(funcao);
        me.Ramal = ko.observable(ramal);
        me.Email = ko.observable(email);
        me.Celular = ko.observable(celular);
        me.Aniversario = ko.observable(aniversario);
    };

    me.funcionarios = ko.observableArray([]);

    me.add = function (id, nome, apelido, hobby, funcao, ramal, email, celular, aniversario) {
       me.funcionarios.push(new Funcionario(me, id, nome, apelido, hobby, funcao, ramal, email, celular, aniversario));
    };
}

var viewModel = new FuncionarioViewModel();
ko.applyBindings(viewModel);

そして、ここにフィドルのリンクがあります: http://jsfiddle.net/Lrqeb/8/

その配列にデフォルトのデータを含むページをロードしたくありません。

4

1 に答える 1

1

編集：

わかりました、あなたのjsfiddleをチェックしてください。バインディングエラーを停止することをif試みる前に、バインディングを使用して配列に要素が含まれているかどうかを確認するように更新しました。foreach

http://jsfiddle.net/Lrqeb/6/

私はあなたを次のもので包みforeachました：

<div data-bind="if: funcionarios().length > 0">

EDIT2：

foreachまた、機能しない table タグに を適用しました。代わりに tbody タグを使用するように変更しましたが、ここで問題なく動作します: http://jsfiddle.net/Lrqeb/10/

変更は次のようになります。

<div data-bind="text: funcionarios().length"></div>
<div data-bind="if: funcionarios().length > 0">
<table>
    <tbody data-bind="foreach: funcionarios">
    <tr>
        <td>Nome: <span data-bind="text: Nome"></span></td>
        <td>Nome: <span data-bind="text: Apelido"></span></td>
        <!-- and so on... -->
    </tr>
   </tbody>
</table>

于 2012-08-06T19:02:51.997 に答える