0

これは面白いものです。ノックアウトjsを使用したページがあります。ページ内の表示されない画像の 1 つを除いて、すべて正常に動作します。

私のHTML

            <div class="cyclerItem"> @*Views and Visitors*@
                <div class="cyclerFilter">
                    <img class="toggleImg" src="~/Content/imgs/City.png" width="30" height="30" />
                </div>
                <div class="cyclerFilterText">
                    <div>
                        <a id="modal-launcher4" > Business Unit </a>  
                        <div id="modal-content4" class="arrow_box">
                            <div id="scroll4" class="scroll4">
                                <div id="container3column" >
                                    <div id="primary1"> 
                                        <p>Business Unit</p>
                                        <ul>
                                            <li>All</li>
                                        </ul>
                                        <ul data-bind="'foreach': businessUnits.businessUnitsList">
                                            <li data-bind="'text': title, 'click': goToFunctions""></li>
                                        </ul>
                                    </div>
                                </div> @* Container ends*@
                            </div>   @* scroll *@
                        </div>  @*modul content 4 4 *@  
                    </div>
                </div>   @* Cykler filter text*@
                <div class="cyclerFilter">
                    <img class="toggleImg" src="~/Content/imgs/Globe_Alt.png" width="30" height="30" />
                </div>
                <div class="cyclerFilter">
                    <img class="toggleImg" src="~/Content/imgs/Globe_Alt.png" width="30" height="30" />
                </div>
                <div class="cyclerFilterText">
                    Geographies
                </div>
            </div>

クライアントでレンダリングされた私の HTML:

                            <div class="cyclerItem"> 
                <div class="cyclerFilter">
                    <img class="toggleImg" src="/Content/imgs/City.png" width="30" height="30" />
                </div>
                <div class="cyclerFilterText">
                    <div>
                        <a id="modal-launcher4" > Business Unit </a>  
                        <div id="modal-content4" class="arrow_box">
                            <div id="scroll4" class="scroll4">
                                <div id="container3column" >
                                    <div id="primary1"> 
                                        <p>Business Unit</p>
                                        <ul>
                                            <li>All</li>
                                        </ul>
                                        <ul data-bind="'foreach': businessUnits.businessUnitsList">
                                            <li data-bind="'text': title, 'click': goToFunctions""></li>
                                        </ul>
                                    </div>
                                    <div id="content1"> 
                                        <p>Function</p>
                                        <ul>
                                            <li>All</li>
                                        </ul>
                                        <ul  data-bind="'foreach': functions.functionsList">
                                            <li  data-bind="'text': title, 'click': goToDepartments"></li>
                                        </ul>
                                    </div>

                                    <div id="secondary1"> 
                                        <p>Department</p>
                                        <ul>
                                            <li>All</li>
                                        </ul>
                                        <ul data-bind="'foreach': departments.departmentsList">
                                            <li data-bind="'text': title"></li>
                                        </ul>
                                    </div>
                                </div> 
                            </div>   
                        </div>    
                    </div>
                </div>   
                <div class="cyclerFilter">
                    <img class="toggleImg" src="~/Content/imgs/Globe_Alt.png" width="30" height="30" />
                </div>
                                    <div class="cyclerFilter">
                    <img class="toggleImg" src="/Content/imgs/Globe_Alt.png" width="30" height="30" />
                </div>

                <div class="cyclerFilterText">
                    Geographies
                </div>
            </div>

小さな違いが 1つだけあることがわかるように、画像の 1 つは、チルダ (~) が正しいパスで解決されなかったソースを持っています。

ソースを別のパスに変更しても機能しませんが、ご覧のとおり、次の画像はまったく同じですが、機能します...

ノックアウトコードが原因で mvc が混乱していることと関係がありますか? それとも、MVC を狂わせる HTML の単純なエラーでしょうか? 早い者勝ちです。:)

4

1 に答える 1

0

私は実際に問題を見つけました。おそらく純粋な HTML の問題です。タグ内の 1 つの属性の末尾に余分な二重引用符があります。li:)私はいくつかのテストを行いましたが、どこでも問題ありませんが、任意のタグに追加の二重引用符として属性がある場合、そのimgは機能しなくなります。なぜそのimg srcであり、他のものではないのだろうか。

于 2013-06-26T14:26:07.270 に答える