Question

我正在尝试使用TAU为可穿戴设备构建Tizen Web应用程序。我有这个清单：

<ul class="ui-listview" id="nearbyList">
        <li class="ui-listview-divider">Nearby</li>


        <li class="li-has-multiline li-has-thumb-left">
                <a href="contents/place1.html">Place 1
                <span class="ui-li-sub-text li-text-sub">Info 1</span>
                <span class="ui-li-sub-text li-text-sub">xxxx</span>
                <img src="../../../css/images/place1.png" class="ui-li-thumb-left">
                </a>
        </li>

        <li class="li-has-multiline li-has-thumb-left">
                <a href="index-old.html">Open Elements
                <span class="ui-li-sub-text li-text-sub">xxxx</span>
                <span class="ui-li-sub-text li-text-sub">xxxx</span>
                <img src="../../../css/images/open.png" class="ui-li-thumb-left">
                </a>
        </li>

    </ul>

我需要使用JS和从Web上获取的数据进行编辑。问题是当我尝试使用JQuery编辑列表时，它似乎不起作用，而是将新元素呈现在现有列表后面。使用Tizen Studio中的调试器菜单，我可以看到TAU大量编辑了HTML，导致我的#nearbyList不包含我上面指定的元素，因此JQuery添加了它，而TAU没有确认并相应地更新。

这是我尝试用来将元素添加到列表中的代码：

$('#nearbyList').append('<li class=\"ui-li-grid\"> <div>Finding Location</div> <div class=\"ui-processing\"></div></li>');//processing animation

而是渲染以下内容：

这是初始化脚本的方式：

<script src="lib/jquery.min.js"></script>
<script src="js/circle-helper.js"></script>

<script src="js/app.js"></script>
<script src="js/lowBatteryCheck.js"></script>
<script src="lib/tau/wearable/js/tau.js"></script>
<script src="lib/jsSHA/sha1.js"></script>
<script src="js/web.js"></script>
<script src="js/location.js"></script>

任何有关如何正确使用JQuery和TAU来向列表中添加元素的帮助都会很棒。

谢谢。

Answer 1

您可以简单地使用JS在列表中添加项目。我已经创建了如下每个项目，并添加了一个循环。

UL = document.getElementById("list");
li = document.createElement("LI");
var textnode = document.createTextNode("Title");
li.appendChild(textnode);
nodeA = document.createElement("A");
var textnode2 = document.createTextNode("Link");
nodeA.appendChild(textnode2);
span = document.createElement("SPAN");
var textnode3 = document.createTextNode("Content");
span.appendChild(textnode3);
li.appendChild(nodeA);
li.appendChild(span);
UL.appendChild(li);

它不会破坏您的TAU列表。

Answer 2

我知道这为时已晚，但对将来的开发人员来说可能会很好。我删除了tau.js包含在html中的内容，并在jQuery渲染列表中的所有元素之后添加了此内容。

$.getScript( "lib/tau/wearable/js/tau.js" )
        .done(function( script, textStatus ) {
            console.log( 'Works!' );
        })
        .fail(function( jqxhr, settings, exception ) {
            console.log( "Triggered ajaxError handler." );
        });

使用Tizen正确编辑Web GUI

2 个答案: