3

hopscotch.js を使用してインタラクティブ ツアーを作成しようとしています。ツアーが機能するために JavaScript ライブラリが必要とする標準的なデータ構造は次のとおりです。

// Define the tour!
    var tour = {
      id: "hello-hopscotch",
      steps: [
        {
          title: "My Header",
          content: "This is the header of my page.",
          target: "header",
          placement: "right"
        },
        {
          title: "My content",
          content: "Here is where I put my content.",
          target: document.querySelector("#content p"),
          placement: "bottom"
        }
      ]
    };

ツアーの手順を JavaScript ライブラリに直接入れることは完全にうまく機能しますが、理想的には、これらすべての詳細をデータベースに保持し、AJAX を使用してデータを hopscotch.js に渡すことができるようにしたいと考えています。(これは、ツアーを動的に作成しcontent、コードをリリースせずに変更できるようにするためです)。

私が要素セレクターtargetを使用しているときを除いて、すべてが正常に機能しています。document.querySelector()

各ツアー ステップの基本的な C# モデルは次のとおりです。

public class MockTourSteps
{
    public string Title { get; set; }
    public string Content { get; set; }
    public string Target { get; set; }
    public string Placement { get; set; }
}

文字列と同様Targetに、値を二重引用符で囲む必要があります。

これに関する問題は、JSON にシリアル化されると、Chrome 開発者ツールでページを表示すると、次のエラーが発生することです。

Syntax error, unrecognized expression: document.querySelector(".btn-primary")

ページに返された JSON データを調べると、mydocument.querySelector()を二重引用符で囲んでいることが問題の原因であることがわかります。

via をtarget指定するときはこれらの二重引用符を my から削除する必要がありますが、などの HTML タグに基づいて を指定するときは二重引用符を残す必要があります。targetdocument.querySelector()targetheader

これを達成する方法はありますか？

4

1 に答える 1

1

提供された例ではjavascriptオブジェクトを使用していますが、サーバーからJSONを取得するという主な問題。クライアント側である種の JSON 処理を使用する必要があります。

モデルにさらに情報を追加できると思います：

public class MockTourStep
{
    public string Title { get; set; }
    public string Content { get; set; }
    public TargetC Target { get; set; }
    public string Placement { get; set; }

    public enum TargetType
    {
        ElementName,
        QuerySelector
    }

    public class TargetC
    {
        [JsonConverter(typeof(StringEnumConverter))]
        public TargetType Type { get; set; }

        public string Value { get; set; } 
    }
}

そしてサンプル応答:

var tour = new
{
    Id = "hello-hopscotch",
    Steps = new List<MockTourStep>
    {
        new MockTourStep
        {
            Title = "My Header",
            Content = "This is the header of my page.",
            Target = new MockTourStep.TargetC
            {
                Type = MockTourStep.TargetType.ElementName,
                Value = "header"
            },
            Placement = "bottom"
        },
        new MockTourStep
        {
            Title = "My content",
            Content = "Here is where I put my content.",
            Target = new MockTourStep.TargetC
            {
                Type = MockTourStep.TargetType.QuerySelector,
                Value = "document.querySelector('#content p')"
            },
            Placement = "bottom"
        }
    }
};

次に、クライアント側でターゲット タイプを確認し、有効な値に設定できます。

$.getJSON("url", function (tour) {
    for (var i = 0; i < tour.steps.length; i++) {
        var step = tour.steps[i];

        switch (step.target.type) {
            case "ElementName":
                step.target = step.target.value;
                break;
            case "QuerySelector":
                step.target = eval(step.target.value);
                break;
            default:
                throw Error;
        }
    }

    hopscotch.startTour(tour);
});

evalへの使用にはご注意くださいQuerySelector。of の使用evalは危険なので、クライアントに何を提供しているかを確認する必要があります。

于 2015-05-05T15:06:39.677 に答える