チェックボックスにアイテムデータをバインドし、attr(checked):checkedを操作してもpropに反映されません #267

Open
TomuroYuki opened this Issue Feb 5, 2014 · 1 comment

Comments

Projects
None yet
3 participants
@TomuroYuki

チェックボックスにデータアイテムをバインドし、イベントでチェックボックスを選択/未選択に変更させようとしました。attributeをchecked/nullに変更してもpropが対応(checkedならtrue、nullならfalse)しませんでした。
そのためイベントを実行してattributeはcheckedでもチェックボックスに✔が入りませんでした。

View(コメントビュー部分)

<!--{h5view id="tmplTodos"}
    <header id="header">
        <h1>todos</h1>
        <input id="new-todo" placeholder="What needs to be done?" autofocus>
    </header>
    <section id="main">
        <input type="checkbox" id="toggle-all">
        <ul id="todo-list" data-h5-loop-context="todos">
            <li>
                <input type="hidden" data-h5-bind="id" />
                <input type="checkbox" class="toggle" data-h5-bind="attr(checked):checked" />
                <label data-h5-bind="content"></label>
                <button class="destroy" id="btnDel"></button>
            </li>
        </ul>
    </section>
-->

データモデル

status : {
        type : 'boolean'
    },
    checked : {
        type : 'string',
        depend : {
            on : 'status',
            calc : function() {
                return this.get('status') ? 'checked' : null;
            }
        }
    },

Logic(イベントで呼ばれるロジック)

toggleStatus : function() {
        var len = this.todos.length;

        for (var i = 0; i < len; i++) {
            var item = this.todos.get(i);

            // 一つでもstatusがfalseならば、全てtrueにする。
            if (item.get('status') == false) {
                for (var j = 0; j < len; j++) {
                    this.todos.get(j).set('status', true);
                }
                return true;
            }
            item.set('status', false);
        }
        return false;
    },
@fukudayasuo

This comment has been minimized.

Show comment
Hide comment
@fukudayasuo

fukudayasuo Feb 10, 2014

チェックボックスに対してユーザ操作(checkedプロパティの操作)があった後に、view.bindでのcheckedプロパティを操作ができないことを以下のコードで確認しました。

<!-- html -->
<div data-h5-context="item" id="item">
    <input type="checkbox" id="ch1" data-h5-bind="attr(checked):check1" />
</div>
// javascript
var elm = $('#ch1')[0];
elm.checked = true;
elm.checked = false;
h5.core.view.bind('body', {item:{check1:'checked'}});
elm.checked; // falseになっている

これはattr()でプロパティが設定されているため、checkedプロパティへ値が反映されていないことが原因です。prop()を使って設定する必要があります。
#259 ではattr(value)指定についてattr()ではなくval()を使用して値を設定するように修正しましたが、これと同様に修正する必要があります。

propを使って設定するべきプロパティは、checkedを含めて以下のプロパティが該当します。

  • checked
  • disabled
  • multiple
  • selected
  • autoplay
  • controls
  • loop

これらすべてについて、data-h5-bindにattrで指定されていたものをpropに変更して適用する、という方法もありますが、propに適用してほしい値はdata-h5-bindでpropを指定するという仕様に変更する方法もあります。

チェックボックスに対してユーザ操作(checkedプロパティの操作)があった後に、view.bindでのcheckedプロパティを操作ができないことを以下のコードで確認しました。

<!-- html -->
<div data-h5-context="item" id="item">
    <input type="checkbox" id="ch1" data-h5-bind="attr(checked):check1" />
</div>
// javascript
var elm = $('#ch1')[0];
elm.checked = true;
elm.checked = false;
h5.core.view.bind('body', {item:{check1:'checked'}});
elm.checked; // falseになっている

これはattr()でプロパティが設定されているため、checkedプロパティへ値が反映されていないことが原因です。prop()を使って設定する必要があります。
#259 ではattr(value)指定についてattr()ではなくval()を使用して値を設定するように修正しましたが、これと同様に修正する必要があります。

propを使って設定するべきプロパティは、checkedを含めて以下のプロパティが該当します。

  • checked
  • disabled
  • multiple
  • selected
  • autoplay
  • controls
  • loop

これらすべてについて、data-h5-bindにattrで指定されていたものをpropに変更して適用する、という方法もありますが、propに適用してほしい値はdata-h5-bindでpropを指定するという仕様に変更する方法もあります。

@simdy simdy added the enhancement label Feb 25, 2014

@simdy simdy added this to the v1.1.9 milestone Feb 25, 2014

@simdy simdy added bug and removed enhancement labels Feb 25, 2014

@simdy simdy assigned simdy and unassigned fukudayasuo Feb 25, 2014

@simdy simdy modified the milestones: v1.1.10, v1.1.9 Mar 17, 2014

@simdy simdy modified the milestones: v1.1.11, v1.1.10 May 12, 2014

@simdy simdy modified the milestones: v1.1.12, v1.1.11 Jun 9, 2014

@simdy simdy removed this from the v1.1.12 milestone Jul 2, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment