How to bind ExtJS model and knockout template?

Question

I have the following ExtJS model:

    Ext.define('TestsModel', {

        name: null, 
        tests: null,

        constructor: function (name) {
            this.name = ko.observable(name);
            this.tests = ko.observableArray([
                {testName: 'FsTest'},
                {testName: 'rmDirTest1'},
                {testName: 'rmDirTest2'},
                {testName: 'mdirTest1'}
            ]);                  
        }
    });

var test = Ext.create('TestsModel');

ko.applyBindings(test);

I want to bind this model with the next template:

<div>
    <p data-bind="text: name"></p>
    <table>
        <tbody data-bind="text: tests">
            <tr>
                <td data-bind="text: testName"></td> 
            </tr>
        </tbody>
    </table>
</div>

but it doesn't work. I got error:

Uncaught TypeError: Cannot read property 'nodeType' of null 

How to should I use Knockout and ExtJS correctly?

Answer 1

It's almost correct. Just use foreach binding instead of text binding:

<div>
<p data-bind="text: name"></p>
<table>
    <tbody data-bind="foreach: tests">
        <tr>
            <td data-bind="text: testName"></td> 
        </tr>
    </tbody>
</table>
</div>

Also to see the name of test suite provide name parameter to the constructor

var test = Ext.create('TestsModel', 'My test suite');

Look at this working sample http://jsfiddle.net/tabalinas/68M8t/