javascript - WebWorks アプリはまったく機能しませんが、Ripple と Chrome と BB ブラウザーでは機能します

Question

JSONP と Zepto.js を使用する単純な BlackBerry アプリを開発中です。ほとんどのコードはすばやく作成されます。Zepto を使用する必要があり、使用する必要はありませんが、今のところテストする必要があります。これまでのところ、すべてのコードが有効であると信じています (JS の初心者 - 学習のみ)。

index.html の例

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <link  rel="stylesheet" type="text/css" href="css/bbsonic.css"><link />
        <link  rel="stylesheet" type="text/css" href="css/ocssui.css"><link />
        <title>Login</title>
        <script type="text/javascript" src="js/zepto.js"></script>
    </head>
    <body>
        <div data-role="page" class="page">

            <div data-role="header" class="header">
                <div id="header-logo">
                    <table>
                        <td valign="middle" class="museo">
                            <h1>BerrySonic</h1>
                        </td>
                    </table>
                </div>
            </div><!-- /header -->

            <div data-role="content" class="content" id="list-wrapper">
                <ul data-role="listview" id="servers" class="listview">
                       <li class="title-divider">Select a Subsonic Server</li>
                </ul>
            </div><!-- /content -->

        </div><!-- /page -->   
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

Index.js:

var db = window.openDatabase("bbsonic", "0.1", "SubSonic Server", 1024*1000);
$(document).ready = prepareDatabase();

function prepareDatabase() {                        
    db.transaction(function(tx) {
        var starterSQL = 'CREATE TABLE IF NOT EXISTS servers (id INTEGER PRIMARY KEY AUTOINCREMENT, name VARCHAR(255) NOT NULL, url VARCHAR(255) NOT NULL, port VARCHAR(255) NOT NULL, user VARCHAR(255) NOT NULL, pass VARCHAR(255) NOT NULL)';
        tx.executeSql(starterSQL, []);
    });
    showServerList();
}

function showServerList() {                     
    db.transaction(function (tx) {
        tx.executeSql('SELECT * FROM servers', [], function (tx, results) {
            var len = results.rows.length, i;
            for (i = 0; i < len; i++) {
                var id = results.rows.item(i).id;
                var name = results.rows.item(i).name;

                var parent = document.getElementById('servers');
                var listItem = document.createElement('a');
                listItem.setAttribute('href', 'main.html');
                listItem.setAttribute('onclick', 'setServerID(' + id + ')');
                if (i == 0) {
                    listItem.innerHTML = '<li class="first-item">' + name + '</li>';
                } else {
                    listItem.innerHTML = '<li>' + name + '</li>';
                }

                parent.appendChild(listItem);
            }

            var parent = document.getElementById('servers');
            var listItem = document.createElement('a');
            listItem.setAttribute('href','addnewserver.html');
            listItem.innerHTML = "<li>Add New Server</li>";
            parent.appendChild(listItem);
        });
    });
}

function setServerID(id) {
    sessionStorage.serverID = id;
}

config.xml (github からコピーしたもの):

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" 
   xmlns:rim="http://www.blackberry.com/ns/widgets" 
   version="1.0.0.0" rim:header="WebWorks Sample">

   <name>BerrySonic</name>
   <description>This is a sample application.</description>
   <content src="index.html"/>

<rim:category name="Media"/>
<rim:category name="Media"/>

    <rim:permissions>
        <rim:permit>access_shared</rim:permit>
        <rim:permit>record_audio</rim:permit>
        <rim:permit>read_geolocation</rim:permit>
        <rim:permit>use_camera</rim:permit>
        <rim:permit>read_device_identifying_information</rim:permit>
    </rim:permissions>

    <!-- 
        Universal APIs: 
            The following features are available on both Smartphone and Tablet OS
    -->
    <feature id="blackberry.app" required="true" version="1.0.0.0"/>
    <feature id="blackberry.app.event" required="true" version="1.0.0.0"/>
    <feature id="blackberry.system" required="true" version="1.0.0.0"/>
    <feature id="blackberry.system.event" required="true" version="1.0.0.0"/>
    <feature id="blackberry.ui.dialog" required="true" version="1.0.0.0"/>
    <feature id="blackberry.utils" required="true" version="1.0.0.0"/>

    <feature id="blackberry.media.camera" required="true" version="1.0.0.0"/>
    <feature id="blackberry.media.microphone" required="true" version="1.0.0.0"/>
    <feature id="blackberry.identity" required="true" version="1.0.0.0"/>
    <feature id="blackberry.invoke" required="true" version="1.0.0.0"/>
    <feature id="blackberry.io.file" required="true" version="1.0.0.0"/>
    <feature id="blackberry.io.dir" required="true" version="1.0.0.0"/>

    <!-- 
        Smartphone APIs: 
            The following features are available ONLY on Smartphone
    --> 
    <feature id="blackberry.ui.menu" required="true" version="1.0.0.0"/>
    <feature id="blackberry.identity.phone" required="true" version="1.0.0.0"/>
    <feature id="blackberry.invoke.AddressBookArguments" required="true" version="1.0.0.0"/>
    <feature id="blackberry.invoke.BrowserArguments" required="true" version="1.0.0.0"/>
    <feature id="blackberry.invoke.CalendarArguments" required="true" version="1.0.0.0"/>
    <feature id="blackberry.invoke.CameraArguments" required="true" version="1.0.0.0"/>
    <feature id="blackberry.invoke.JavaArguments" required="true" version="1.0.0.0"/>
    <feature id="blackberry.invoke.MapsArguments" required="true" version="1.0.0.0"/>
    <feature id="blackberry.invoke.MemoArguments" required="true" version="1.0.0.0"/>
    <feature id="blackberry.invoke.MessageArguments" required="true" version="1.0.0.0"/>
    <feature id="blackberry.invoke.PhoneArguments" required="true" version="1.0.0.0"/>
    <feature id="blackberry.invoke.SearchArguments" required="true" version="1.0.0.0"/>
    <feature id="blackberry.invoke.TaskArguments" required="true" version="1.0.0.0"/>
    <feature id="blackberry.message" required="true" version="1.0.0.0"/>
    <feature id="blackberry.message.sms" required="true" version="1.0.0.0"/>
    <feature id="blackberry.pim.Address" required="true" version="1.0.0.0"/>
    <feature id="blackberry.pim.Attendee" required="true" version="1.0.0.0"/>
    <feature id="blackberry.pim.Appointment" required="true" version="1.0.0.0"/>
    <feature id="blackberry.pim.category" required="true" version="1.0.0.0"/>
    <feature id="blackberry.pim.Contact" required="true" version="1.0.0.0"/>
    <feature id="blackberry.pim.Memo" required="true" version="1.0.0.0"/>
    <feature id="blackberry.pim.Recurrence" required="true" version="1.0.0.0"/>
    <feature id="blackberry.pim.Reminder" required="true" version="1.0.0.0"/>
    <feature id="blackberry.pim.Task" required="true" version="1.0.0.0"/>

    <feature id="blackberry.audio" required="true" version="1.0.0.0"/>
    <feature id="blackberry.audio.Player" required="true" version="1.0.0.0"/>

    <feature id="blackberry.find" required="true" version="1.0.0.0"/>
    <feature id="blackberry.phone.Phone" required="true" version="1.0.0.0"/>
    <feature id="blackberry.phone.PhoneLogs" required="true" version="1.0.0.0"/>

    <feature id="blackberry.push" required="true" version="1.0.0.0"/>
    <feature id="blackberry.find" required="true" version="1.0.0.0"/>

    <access subdomains="true" uri="*"/>

</widget>

クロムとリップルでは完全に機能しますが、ブラックベリーではヘッダーのみをロードし、順序付けられていないリストもロードしません! それをデバッグする方法すらわかりません...助けていただければ幸いです。

score 2 · Accepted Answer

よくわかりませんが、一部のHTMLタグを誤って使用していないと思います。通常、を作成する場合は<table>、<tr>タグをネストしてから、そこにタグをネストし<td>ます。例

<table>
  <tr>
    <td><h1>BerrySonic</h1></td>
  </tr>
</table>

テーブルを完全に削除し、の直下を使用することをお勧めし<h1>ます<div id="header-logo">。（Zeptoが非常に奇妙な理由でそれを要求しない限り。私はそれに精通していません）

また、Javaスクリプトがリストに対して誤ったHTMLを作成しています。テーブルの場合と同様に、要素には要素がネストされている<ul>必要があります。<li>のコードはshowServerList()、次のようなHTMLを作成します。

<a href="main.html"><li class="first-item">Server 1</li></a>
<a href="main.html"><li>Server 2</li></a>

本当に必要な場合：

<li class="first-item"><a href="main.html">Server 1</a></li>
<li><a href="main.html">Server 2</a></li>

これらの変更を行って、レンダリングの問題が修正されるかどうかを確認してください。

javascript - WebWorks アプリはまったく機能しませんが、Ripple と Chrome と BB ブラウザーでは機能します

1 に答える 1

Related

Reference