knockout.js - マッピングを使用する場合、knockoutjs の observablearray に項目を追加する

Question

一部の JSON をロールと呼ばれる observablearray にマッピングし、自分のページに表示しています。これはうまくいきます。モデルで addRole を呼び出す配列にいくつかの項目を追加したいので、いくつかの入力フィールドを追加しました。しかし、以下の self.addRole の入力フィールドに入力した値を取得するにはどうすればよいですか?

<ul data-bind="foreach: roles" id="rolesContainer">
 <li><div data-bind="attr:{class: css}"></div><span data-bind="text: rolename"></span></li>
</ul>
<div  id="rolesContainer2">
 <input data-bind='value: rolename' />
 <input data-bind='value: css' />
 <button data-bind="click: addRole">Add</button> 
</div>


var roleViewModel=new RoleModel();
function RoleModel(){
    var self=this;
    self.roles=ko.observableArray();

    self.addRole = function(item) {
        self.roles.push({ name: item.rolename, css: item.css });
    };
}

function getRolesSuccess(data) {
    roleViewModel.roles=ko.mapping.fromJS(data);
    ko.applyBindings(roleViewModel, $("#rolesContainer")[0]);   
    ko.applyBindings(roleViewModel, $("#rolesContainer2")[0]);    
}
};